web-dev-qa-db-fra.com

Comment déclencher l'événement de redimensionnement de la fenêtre en JavaScript?

J'ai enregistré un déclencheur sur la fenêtre redimensionner. Je veux savoir comment je peux déclencher l'appel de l'événement. Par exemple, lorsque vous masquez une div, je souhaite que ma fonction de déclencheur soit appelée.

J'ai trouvé que window.resizeTo() peut déclencher la fonction, mais existe-t-il une autre solution?

javascriptjqueryevents
287
zhongshu

Dans la mesure du possible, je préfère appeler la fonction plutôt que d’envoyer un événement. Cela fonctionne bien si vous avez le contrôle sur le code que vous voulez exécuter, mais voyez ci-dessous les cas où vous ne possédez pas le code.

window.onresize = doALoadOfStuff;

function doALoadOfStuff() {
    //do a load of stuff
}

Dans cet exemple, vous pouvez appeler la fonction doALoadOfStuff sans envoyer d'événement.

Dans vos navigateurs modernes, vous pouvez déclencher l'événement en utilisant:

window.dispatchEvent(new Event('resize'));

Cela ne fonctionne pas dans Internet Explorer, où vous devrez faire la longue:

var resizeEvent = window.document.createEvent('UIEvents'); 
resizeEvent.initUIEvent('resize', true, false, window, 0); 
window.dispatchEvent(resizeEvent);

jQuery a la méthode trigger , qui fonctionne comme ceci:

$(window).trigger('resize');

Et a la mise en garde:

Bien que .trigger () simule l'activation d'un événement avec un objet événement synthétisé, il ne réplique pas parfaitement un événement naturel.

Vous pouvez également simuler des événements sur un élément spécifique ...

function simulateClick(id) {
  var event = new MouseEvent('click', {
    'view': window,
    'bubbles': true,
    'cancelable': true
  });

  var elem = document.getElementById(id); 

  return elem.dispatchEvent(event);
}
320
Fenton
window.dispatchEvent(new Event('resize'));
639
avetisk

Avec jQuery, vous pouvez essayer d’appeler trigger :

$(window).trigger('resize');
153
Benjamin Crouzier

Un JS pur qui fonctionne également sur IE (de @ Manfred comment )

var evt = window.document.createEvent('UIEvents'); 
evt.initUIEvent('resize', true, false, window, 0); 
window.dispatchEvent(evt);

Ou pour angulaire:

$timeout(function() {
    var evt = $window.document.createEvent('UIEvents'); 
    evt.initUIEvent('resize', true, false, $window, 0); 
    $window.dispatchEvent(evt);
});
52
pomber

Combinaison des réponses de pomberie et d'avetisk pour couvrir tous les navigateurs sans provoquer d'avertissements:

if (typeof(Event) === 'function') {
  // modern browsers
  window.dispatchEvent(new Event('resize'));
} else {
  // for IE and other old browsers
  // causes deprecation warning on modern browsers
  var evt = window.document.createEvent('UIEvents'); 
  evt.initUIEvent('resize', true, false, window, 0); 
  window.dispatchEvent(evt);
}
37
pfirpfel

En fait, je n'ai pas réussi à obtenir que cela fonctionne avec l'une des solutions ci-dessus. Une fois que j'ai lié l'événement avec jQuery, cela a bien fonctionné comme ci-dessous:

$(window).bind('resize', function () {
    resizeElements();
}).trigger('resize');
13
BBQ Singular

juste

$(window).resize();

c’est ce que j’utilise ... sauf si je comprends mal ce que vous demandez.

6
Matt Sich

Je crois que cela devrait fonctionner pour tous les navigateurs:

var event;
if (typeof (Event) === 'function') {
    event = new Event('resize');
} else { /*IE*/
    event = document.createEvent('Event');
    event.initEvent('resize', true, true);
}
window.dispatchEvent(event);
0
webaholik

Réponse avec RxJS

Dis comme quelque chose en angulaire

size$: Observable<number> = fromEvent(window, 'resize').pipe(
            debounceTime(250),
            throttleTime(300),
            mergeMap(() => of(document.body.clientHeight)),
            distinctUntilChanged(),
            startWith(document.body.clientHeight),
          );

Si abonnement manuel souhaité (ou non angulaire)

this.size$.subscribe((g) => {
      console.log('clientHeight', g);
    })

Depuis mon intial startWith La valeur peut être incorrecte (envoi pour correction)

window.dispatchEvent(new Event('resize'));

En dis Angular (je pourrais ..)

<div class="iframe-container"  [style.height.px]="size$ | async" >..
0
Sergio Wilson