Comment activer la fenêtre redimensionner en JavaScript?

j'ai enregistré un déclencheur sur la fenêtre redimensionner. Je veux savoir comment je peux déclencher l'événement à appeler. Par exemple, quand 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 est-il une autre solution?

249
demandé sur Costique 2009-11-30 11:16:29
la source

8 ответов

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 voir ci-dessous pour 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 Manche longue:

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

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

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

et a la mise en garde:

bien que .trigger () simule une activation d'événement, complète avec un objet d'événement synthétisé, elle 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);
}
268
répondu user75525 2017-09-22 11:40:45
la source
window.dispatchEvent(new Event('resize'));
591
répondu avetisk 2015-10-20 18:45:44
la source

avec jQuery, vous pouvez essayer d'appeler déclencheur :

$(window).trigger('resize');
141
répondu Benjamin Crouzier 2013-04-12 16:54:13
la source

Une pure JS qui fonctionne aussi sur IE (à partir de @Manfred commentaire )

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);
});
45
répondu pomber 2017-05-23 15:02:57
la source

combinant les réponses de pomber et avetisk pour couvrir tous les navigateurs et ne pas causer 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);
}
18
répondu pfirpfel 2018-04-12 17:37:52
la source

Je n'ai pas été en mesure de faire fonctionner cette solution avec l'une des solutions ci-dessus. Une fois que j'ai relié l'événement avec jQuery puis il a fonctionné très bien comme ci-dessous:

$(window).bind('resize', function () {
    resizeElements();
}).trigger('resize');
12
répondu BBQ Singular 2014-03-25 18:59:12
la source

juste

$(window).resize();

est ce que j'utilise... à moins que je ne comprenne mal ce que vous demandez.

6
répondu Matt Sich 2014-12-18 04:19:05
la source

window.resizeBy() déclenchera l'événement onresize de window. Cela fonctionne dans les deux Javascript ou VBScript .

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

-3
répondu T.O. 2014-05-08 19:22:06
la source

Autres questions sur javascript jquery events