Wie kann das Fenstergrößenänderungsereignis in JavaScript ausgelöst werden?

326

Ich habe einen Auslöser für die Fenstergröße registriert. Ich möchte wissen, wie ich das aufzurufende Ereignis auslösen kann. Wenn Sie beispielsweise ein Div ausblenden, möchte ich, dass meine Triggerfunktion aufgerufen wird.

Ich habe festgestellt window.resizeTo(), dass die Funktion ausgelöst werden kann, aber gibt es eine andere Lösung?

zhongshu
quelle

Antworten:

381

Wenn möglich, rufe ich die Funktion lieber auf, als ein Ereignis auszulösen. Dies funktioniert gut, wenn Sie die Kontrolle über den Code haben, den Sie ausführen möchten. Im Folgenden finden Sie jedoch 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 doALoadOfStuffFunktion aufrufen , ohne ein Ereignis auszulösen.

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

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

Dies funktioniert nicht in Internet Explorer, wo Sie die Langschrift ausführen müssen:

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

jQuery hat die triggerMethode , die folgendermaßen funktioniert:

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

Und hat die Einschränkung:

Obwohl .trigger () eine Ereignisaktivierung mit einem synthetisierten Ereignisobjekt simuliert, wird ein natürlich vorkommendes Ereignis nicht perfekt repliziert.

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);
}
Fenton
quelle
6
Ihre anonyme Funktion ist nicht erforderlich. window.onresize = doALoadOfStuff; Auch dies beantwortet die Frage nicht, Pinouchons Antwort unten ist die richtige Antwort.
Dennis Plucinik
42
Zu Google Rs: Schauen Sie sich die Antwort von @ avetisk an.
Fabian Lauer
1
Es ist eine gute Idee, sich zu entkoppeln, aber in meinem / diesem Fall funktioniert es nicht. Das Aufrufen der Größenänderungsmethode funktioniert nicht, da bei verschiedenen anderen Div / Containern nicht die richtige Höhe eingestellt ist, wenn die Fenstergrößenänderung nicht ausgelöst wird.
PandaWood
@PandaWood - dann ist mein letztes Beispiel in Ihrem Fall besser.
Fenton
Vielen Dank, dass Sie @ user75525
Bondsmith
675
window.dispatchEvent(new Event('resize'));
Avetisk
quelle
11
scheint mit Chrome, FF, Safari zu funktionieren, aber nicht: IE!
Davem M
14
jQuery's triggerlöst das native "Resize" -Ereignis nicht aus. Es werden nur Ereignis-Listener ausgelöst, die mit jQuery hinzugefügt wurden. In meinem Fall hat eine Bibliothek eines Drittanbieters das native "Größenänderungs" -Ereignis direkt abgehört, und dies ist die Lösung, die für mich funktioniert hat.
Chowey
2
Tolle und einfache Lösung. Obwohl ich denke, Sie sollten etwas Code für die IE-Kompatibilität hinzufügen (soweit ich sehe, für IE müssen wir verwenden window.fireEvent)
Victor
35
Dies funktionierte nicht auf allen Geräten für mich. Ich musste das Ereignis wie folgt auslösen: var evt = document.createEvent ('UIEvents'); evt.initUIEvent ('resize', true, false, window, 0); window.dispatchEvent (evt);
Manfred
19
Es schlägt fehl mit "Objekt unterstützt diese Aktion nicht" in meinem IE11
Pomber
156

Mit jQuery können Sie versuchen, den Trigger aufzurufen :

$(window).trigger('resize');
Benjamin Crouzier
quelle
3
Ein Anwendungsfall hierfür ist, wenn ein jQuery-Plugin Fenstergrößenänderungsereignisse verwendet, um darauf zu reagieren, Sie jedoch eine reduzierte Seitenleiste haben. Die Größe des Plugins-Containers wird geändert, das Fenster jedoch nicht.
Isherwood
4
JQuery wird zwar nicht benötigt, aber ich bevorzuge die JQuery-Lösung, da mein Produkt JQuery in großem Umfang verwendet.
Sri
Wo würde dies hinzugefügt, um die Größe einer WordPress-Seite nach dem Laden zu ändern?
SAHM
Dies funktioniert nicht für mich in der neuesten Chrome, diese Antwort funktioniert: stackoverflow.com/a/22638332/1296209
webaholik
1
Dies ist, was ich anfangs versucht habe - es hat nicht funktioniert, aber es hat window.dispatchEvent(new Event('resize'));funktioniert
user2682863
54

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

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

Oder für eckige:

$timeout(function() {
    var evt = $window.document.createEvent('UIEvents'); 
    evt.initUIEvent('resize', true, false, $window, 0); 
    $window.dispatchEvent(evt);
});
pomber
quelle
4
Leider ist die Dokumentation für UIEvent.initUIEvent () sagt Do not use this method anymore as it is deprecated.die create docs sagen „mit create verwendet viele Verfahren, wie initCustomEvent, sind veraltet. Verwenden Sie Ereignis Bauer statt.“ Diese Seite sieht für UI-Ereignisse vielversprechend aus.
Racing Tadpole
9
Stimmt, aber IE11 unterstützt die new Event()Methode nicht. Ich denke, als Hack gegen ältere Browser könnte man so etwas tun if (Event.prototype.initEvent) { /* deprecated method */ } else { /* current method */ }. Wo die aktuelle Methode die Antwort des Avetisk ist .
BrianS
@pomber Vielen Dank für die Lösung. Eigentlich habe ich versucht, ein benutzerdefiniertes Ereignis für die Größenänderung von Fenstern auszulösen, um die Größe meines Diagramms zu ändern. Ihre Lösung rettet meinen Tag
Dinesh Gopal Chand
49

Kombinieren Sie die Antworten von Pomber und Avetisk, um alle Browser abzudecken und keine Warnungen auszulösen:

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);
}
pfirpfel
quelle
1
Dies ist eine gute Möglichkeit, dies ohne Browser zu tun, ohne jQuery zu verwenden.
kgx
Keine Ahnung, warum dies nicht die beste Antwort ist. Dies ist besser als die akzeptierten "Entweder-Oder" -Antworten.
SPillai
14

Ich war nicht in der Lage, dies mit einer der oben genannten Lösungen zum Laufen zu bringen. Sobald ich das Ereignis mit jQuery verbunden habe, hat es wie folgt funktioniert:

$(window).bind('resize', function () {
    resizeElements();
}).trigger('resize');
BBQ Singular
quelle
Funktioniert heute in Chrome.
Webaholik
9

gerade

$(window).resize();

ist das, was ich benutze ... es sei denn, ich verstehe falsch, wonach Sie fragen.

Matt Sich
quelle
3
Und selbst wenn Sie über jQuery verfügen, werden nur Ereignisse ausgelöst, die an jQuery gebunden waren.
Adamdport
0

Antwort mit RxJS

Sagen Sie wie etwas in Angular

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

Wenn ein manuelles Abonnement gewünscht wird (oder nicht eckig)

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

Da mein anfänglicher Start mit Wert möglicherweise falsch ist (Versand zur Korrektur)

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

In sagen Angular (ich könnte ..)

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

Ich glaube, das sollte für alle Browser funktionieren:

var event;
if (typeof (Event) === 'function') {
    event = new Event('resize');
} else { /*IE*/
    event = document.createEvent('Event');
    event.initEvent('resize', true, true);
}
window.dispatchEvent(event);
Webaholik
quelle
Funktioniert hervorragend in Chrome und FF, aber nicht in IE11
Collins
@Collins - danke für das Update, dachte, ich hätte dies auf IE11 überprüft ... Ich werde versuchen, einige Zeit später zu brauchen, um dies zu aktualisieren, danke für das Feedback.
Webaholik
0

Sie können dies mit dieser Bibliothek tun. https://github.com/itmor/events-js

const events = new Events();

events.add({  
  blockIsHidden: () =>  {
    if ($('div').css('display') === 'none') return true;
  }
});

function printText () {
  console.log('The block has become hidden!');
}

events.on('blockIsHidden', printText);
Es Mor
quelle
-3

window.resizeBy()löst das Onresize-Ereignis des Fensters aus. Dies funktioniert sowohl in Javascript als auch in VBScript .

window.resizeBy(xDelta, yDelta)aufgerufen wie window.resizeBy(-200, -200)Seite 200px um 200px verkleinern.

ZU
quelle
2
Warum ist das markiert? Ist es falsch Ist es browserabhängig?
Peter Wone
2
Dies funktioniert in keinem Browser: Chrome, Firefox, IE, Firefox getestet.
Fregante
1
Firefox 7+ und wahrscheinlich andere moderne Browser erlauben es in den meisten Fällen nicht mehr, diese Methode aufzurufen. Darüber hinaus ist es nicht wünschenswert, die Fenstergröße tatsächlich zu ändern, um das Ereignis auszulösen.
user247702
Sowohl resizeBy () als auch resizeTo () funktionieren in der neuesten stabilen Chrome-Version einwandfrei. 76,0
Vanagas