Événement de redimensionnement de la fenêtre multi-navigateur - JavaScript / jQuery

Quelle est la bonne méthode (moderne) pour accéder à 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?

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

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

Dans un souci de réactivité de l'interface utilisateur, vous pouvez envisager d'utiliser un setTimeout pour appeler votre code uniquement après un certain nombre de millisecondes, comme le montre l'exemple suivant, inspiré par ceci :

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

var resizeTimer;
$(window).resize(function() {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(doSomething, 100);
});

$(window).bind('resize', function () { 

    alert('resize');

});

Voici la manière non jQuery de puiser dans l'événement de redimensionnement:

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

Il fonctionne sur tous les navigateurs modernes. Il ne pas accélérateur quoi que ce soit pour vous. En voici un exemple en action.

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

function foo(){....};
window.onresize=foo;

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

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();
    };
});

Edit :)
* En fait, pas techniquement identique, comme indiqué et expliqué dans les commentaires de WraithKenny et Henry Blyth .

jQueryfournit une $(window).resize()fonction 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> 

Je considère que le plugin jQuery "jQuery resize event" est la meilleure solution pour cela car il prend en charge la limitation de l'événement afin qu'il fonctionne de la même manière sur tous les navigateurs. C'est similaire à la réponse d'Andrews mais mieux car vous pouvez accrocher l'événement de redimensionnement à des éléments / sélecteurs spécifiques ainsi qu'à la fenêtre entière. Il 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'écouteurs, mais pour la plupart des cas d'utilisation, c'est parfait.

Je pense que vous devriez ajouter plus de contrôle à 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);
        });
    }

j'espère que cela aidera dans jQuery

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

 function someFun() {
 //use your code
 }

redimensionner le navigateur utiliser comme ceux-ci.

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

Outre les fonctions de redimensionnement de fenêtre mentionnées, il est important de comprendre que les événements de redimensionnement se déclenchent beaucoup s'ils sont utilisés sans débouchant sur les événements.

Paul Irish a une excellente fonction qui résiste beaucoup aux appels de redimensionnement. Très recommandé à 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 consulter la démo pour voir la différence.

Voici la fonction d'exhaustivité.

(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...
});