web-dev-qa-db-fra.com

Événement de redimensionnement de fenêtre entre navigateurs - JavaScript / jQuery

Quelle est la méthode correcte (moderne) pour taper dans l'événement de redimensionnement de la fenêtre qui fonctionne dans Firefox, WebKit et Internet Explorer?

Et pouvez-vous activer/désactiver les deux barres de défilement?

javascriptjquerycross-browserresize
239
BuddyJoe

jQuery a un méthode intégrée pour cela:

$(window).resize(function () { /* do something */ });

Dans l'intérêt de la réactivité de l'interface utilisateur, vous pouvez envisager d'utiliser setTimeout pour appeler votre code uniquement après un certain nombre de millisecondes, comme illustré dans l'exemple suivant, inspiré par this :

function doSomething() {
    alert("I'm done resizing for the moment");
};

var resizeTimer;
$(window).resize(function() {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(doSomething, 100);
});
364
Andrew Hedges
$(window).bind('resize', function () { 

    alert('resize');

});
48
fts

Voici le moyen non jQuery de puiser dans l'événement de redimensionnement:

window.addEventListener('resize', function(event){
  // do stuff here
});

Cela fonctionne sur tous les navigateurs modernes. Cela ( ne réduit pas rien pour vous. Voici un exemple en action.

42
Jondlm

Désolé de faire apparaître un ancien fil de discussion, mais si quelqu'un ne veut pas utiliser jQuery, vous pouvez utiliser ceci:

function foo(){....};
window.onresize=foo;
16
javascript is future

Puisque vous êtes ouvert à jQuery, ce plugin semble faire l'affaire.

8
Paolo Bergantino

En utilisant jQuery 1.9.1, je viens de découvrir que, bien que techniquement identique) *, cela ne fonctionnait pas dans IE10 (mais dans Firefox):

// did not work in IE10
$(function() {
    $(window).resize(CmsContent.adjustSize);
});

alors que cela fonctionnait dans les deux navigateurs:

// did work in IE10
$(function() {
    $(window).bind('resize', function() {
        CmsContent.adjustSize();
    };
});

Modifier:
) * En réalité pas techniquement identique, comme indiqué et expliqué dans les commentaires par WraithKenny et Henry Blyth .

5
bassim

jQuery fournit la fonction $(window).resize() par défaut:

<script type="text/javascript">
// function for resize of div/span elements
var $window = $( window ),
    $rightPanelData = $( '.rightPanelData' )
    $leftPanelData = $( '.leftPanelData' );

//jQuery window resize call/event
$window.resize(function resizeScreen() {
    // console.log('window is resizing');

    // here I am resizing my div class height
    $rightPanelData.css( 'height', $window.height() - 166 );
    $leftPanelData.css ( 'height', $window.height() - 236 );
});
</script>
4
Aditya P Bhatt

Je considère le plug-in jQuery "événement jQuery resize" comme la meilleure solution car il se charge de limiter l'événement de sorte qu'il fonctionne de la même manière sur tous les navigateurs. C'est similaire à la réponse Andrews mais mieux car vous pouvez associer l'événement de redimensionnement à des éléments/sélecteurs spécifiques ainsi qu'à la fenêtre entière. Cela ouvre de nouvelles possibilités pour écrire du code propre.

Le plugin est disponible ici

Il y a des problèmes de performances si vous ajoutez beaucoup d'auditeurs, mais c'est parfait pour la plupart des cas d'utilisation.

3
oldwizard

Outre les fonctions de redimensionnement de la fenêtre mentionnées, il est important de comprendre que les événements de redimensionnement déclenchent beaucoup s’ils sont utilisés sans un débouillage des événements.

Paul Irish a une excellente fonction qui réduit considérablement les appels de redimensionnement. Très recommandé d'utiliser. Fonctionne sur plusieurs navigateurs. Testé dans IE8 l'autre jour et tout allait bien.

http://www.paulirish.com/2009/throttled-smartresize-jquery-event-handler/

Assurez-vous de consultez la démo pour voir la différence.

Voici la fonction de complétude.

(function($,sr){

  // debouncing function from John Hann
  // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
  var debounce = function (func, threshold, execAsap) {
      var timeout;

      return function debounced () {
          var obj = this, args = arguments;
          function delayed () {
              if (!execAsap)
                  func.apply(obj, args);
              timeout = null;
          };

          if (timeout)
              clearTimeout(timeout);
          else if (execAsap)
              func.apply(obj, args);

          timeout = setTimeout(delayed, threshold || 100);
      };
  }
  // smartresize 
  jQuery.fn[sr] = function(fn){  return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };

})(jQuery,'smartresize');


// usage:
$(window).smartresize(function(){
  // code that takes it easy...
});
0
lowtechsun

Je pense que vous devriez ajouter un contrôle supplémentaire à ceci:

    var disableRes = false;
    var refreshWindow = function() {
        disableRes = false;
        location.reload();
    }
    var resizeTimer;
    if (disableRes == false) {
        jQuery(window).resize(function() {
            disableRes = true;
            clearTimeout(resizeTimer);
            resizeTimer = setTimeout(refreshWindow, 1000);
        });
    }
0
Francesco Frapporti

espérons que cela aidera jQuery

définissez d’abord une fonction, s’il existe déjà une fonction, passez à l’étape suivante.

 function someFun() {
 //use your code
 }

le redimensionnement du navigateur utilise comme ceux-ci.

 $(window).on('resize', function () {
    someFun();  //call your function.
 });
0
Venu immadi