Wie löst man das Ereignis "Fenstergröße ändern" in JavaScript aus?

Question

Ich habe einen Auslöser für die Größenänderung des Fensters registriert. Ich möchte wissen, wie ich das Ereignis auslösen kann, um aufgerufen zu werden. Wenn ich zum Beispiel ein Div ausblende, möchte ich, dass meine Triggerfunktion aufgerufen wird.

Ich fand window.resizeTo() kann die Funktion auslösen, aber gibt es eine andere Lösung?

Answer 1

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

Answer 2

Wenn möglich, ziehe ich es vor, die Funktion aufzurufen, anstatt ein Ereignis zu versenden. Dies funktioniert gut, wenn Sie die Kontrolle über den auszuführenden Code haben, aber siehe unten für Fälle, in denen Sie den Code nicht besitzen.

window.onresize = doALoadOfStuff;

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

In diesem Beispiel können Sie die doALoadOfStuff Funktion, ohne ein Ereignis auszulösen.

In Ihren modernen Browsern können Sie das Ereignis auslösen verwenden:

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

Dies funktioniert nicht im Internet Explorer, wo Sie die Eingabe per Hand vornehmen müssen:

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

jQuery hat die trigger Methode die folgendermaßen funktioniert:

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

Und hat den Vorbehalt:

Obwohl .trigger() eine Ereignisaktivierung mit einem synthetischen Ereignisobjekt simuliert, kann sie ein natürliches Ereignis nicht perfekt nachbilden.

Sie können auch Ereignisse für ein bestimmtes Element simulieren...

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

Mit jQuery können Sie versuchen, die Auslöser :

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

Answer 4

Kombination der Antworten von pomber und avetisk, um alle Browser abzudecken und keine Warnungen zu verursachen:

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

Answer 5

Ein reines JS, das auch im IE funktioniert (von @Manfred Kommentar )

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

Oder für eckig:

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