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


240

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?


J'examine également cela. Je voudrais essayer d'appliquer les solutions proposées ici, mais je crains de ne pas comprendre la syntaxe: $ (fenêtre). Est-ce quelque chose de spécifique à jquery?
Byff

1
Byff, oui, $ (window) est une construction jQuery. window.onresize est l'équivalent en JavaScript brut.
Andrew Hedges

Cette démo peut aider quiconque à tester sur tous les navigateurs jsfiddle.net/subodhghulaxe/bHQV5/2
Subodh Ghulaxe

window.dispatchEvent(new Event('resize')); stackoverflow.com/questions/1818474/…
Dylan Valade

Sur Opera sur mobile, il est déclenché chaque fois que la barre supérieure (interface utilisateur du navigateur) s'affiche / se cache.
psur

Réponses:


367

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

34
Pourquoi cet événement n'est pas déclenché lorsque la fenêtre est agrandie en plein écran avec le bouton?
Sly

2
@Sly Pour moi, cela fonctionne, dans Safari, Chrome et Mozilla sur Mac. Quel navigateur utilisez-vous?
Mark Vital

2
@Sly:$('.button').on({ click: function(){ /* your code */ $(window).trigger('resize') })
Zack Zatkin-Gold

6
Elijah, c'est JavaScript. Ce que vous avez écrit n'est pas correct (sauf pour un cas spécifique lorsque vous construisez avec new).
Yoh Suzuki

3
Il convient de mentionner que cette fonction jQuery "ajoute" un appel de fonction à la liste actuelle des fonctions qui doivent être appelées lors du redimensionnement d'une fenêtre. Il n'écrase pas les événements existants qui sont actuellement planifiés sur un redimensionnement de fenêtre.
RTF

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

    alert('resize');

});

4
Je préfère l'approche de liaison, car la méthode resize () est en fait un raccourci pour l'approche de liaison complète, et je trouve souvent qu'il y a généralement plus d'un gestionnaire d'événements que je devrais appliquer à un élément.
Mike Kormendy

@Mike - Non seulement cela, mais je suppose que la méthode de redimensionnement n'a pas de méthode "dissocier" dans le cas où vous souhaitez supprimer l'écouteur. "lier" est définitivement la voie à suivre!
Shane

43

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.


cette solution ne fonctionnerait pas dans IE. Version fixe avec prise en charge d'IE dom: stackoverflow.com/questions/6927637/…
Sergey

1
> Il n'étrangle rien pour vous. Pourriez-vous s'il vous plaît développer? Que devrait-il / voudrait-il étrangler? Est-ce lié à l'événement qui a eu lieu plusieurs fois de suite?
josinalvo

@josinalvo généralement lorsque vous écoutez un événement qui se déclenche beaucoup, vous voudrez le rebondir (par exemple lodash) afin de ne pas provoquer de goulot d'étranglement dans votre programme.
Jondlm

17

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;

8
Sachez simplement que cela encombrera tous les gestionnaires existants qui pourraient être liés à window.onresize. Si votre script doit vivre un écosystème avec d'autres scripts, vous ne devez pas supposer que votre script est le seul à vouloir faire quelque chose lors du redimensionnement de la fenêtre. Si vous ne pouvez pas utiliser un framework tel que jQuery, vous devriez au moins envisager de saisir le window.onresize existant et d'ajouter votre gestionnaire à la fin de celui-ci, plutôt que de le remplir complètement.
Tom Auger

2
@TomAuger "vous devriez au moins envisager de saisir le window.onresize existant, et d'ajouter votre gestionnaire à la fin de celui-ci" - vous vouliez probablement dire le contraire, c'est-à-dire "appeler le gestionnaire existant à la fin de votre gestionnaire"? J'aimerais vraiment voir un code javascript qui ajouterait quelque chose à la fin d'une fonction déjà existante :-)
TMS

Je vois votre point, dans un sens - votre nouveau gestionnaire onResize doit encapsuler le onResize existant. Cependant, il n'a pas besoin d'appeler la fonction que vous vouliez ajouter à onResize avant d'avoir appelé le gestionnaire onResize d'origine. Ainsi, vous pouvez toujours vous assurer que votre nouvelle fonction onResize s'exécute après la fonction onResize d'origine, ce qui est probablement mieux que l'inverse.
Tom Auger


5

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 .


1
Il y a deux changements. Lequel a eu l'effet? ( .resize()à .bind('resize')ou en ajoutant la fonction anonyme? Je pense que c'est la seconde.)
WraithKenny

@WraithKenny Bon point. Il se peut très bien que l'ajout de la fonction anonyme soit ce qui l'a fait fonctionner. Je ne me souviens pas si je l'ai essayé.
bassim

1
Dans le premier cas, la adjustSizeméthode perd son contexte de this, alors que le second appel CmsContent.adjustSize()conserve this, ie this === CmsContent. Si l' CmsContentinstance est requise dans la adjustSizeméthode, le premier cas échouera. Le deuxième cas fonctionnera pour chaque type d'appel de fonction, il est donc recommandé de toujours passer une fonction anonyme.
Henry Blyth

1
@HenryBlyth Merci! +1
bassim

4

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> 

3

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.


0

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

0

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

0

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...
});
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.