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

Question

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

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

Answer 1

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

Answer 2

Dans la mesure du possible, je préfère appeler la fonction plutôt que de dispatcher un événement. Cela fonctionne bien si vous avez le contrôle du 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 le 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 le faire à la main :

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

jQuery a le trigger méthode qui fonctionne comme suit :

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

Answer 3

Avec jQuery, vous pouvez essayer d'appeler déclencher :

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

Answer 4

Je n'ai pas réussi à le faire fonctionner avec les 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');

Answer 5

window.resizeBy() déclenchera l'événement onresize de la fenêtre. Cela fonctionne à la fois dans Javascript o VBScript .

window.resizeBy(xDelta, yDelta) appelé comme window.resizeBy(-200, -200) pour réduire la page de 200px par 200px.