it-swarm.com.de

Wie löse ich das Fenstergrößenänderungsereignis in JavaScript aus?

Ich habe einen Auslöser für die Größenänderung des Fensters registriert. Ich möchte wissen, wie ich das aufzurufende Ereignis auslösen kann. Wenn ich zum Beispiel ein Div verstecke, möchte ich, dass meine Trigger-Funktion aufgerufen wird.

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

287
zhongshu

Nach Möglichkeit 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, 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 Funktion doALoadOfStuff aufrufen, ohne ein Ereignis auszulösen.

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

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

Dies funktioniert in Internet Explorer nicht, 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 trigger Methode , die so funktioniert:

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

Und hat die Einschränkung:

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

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);
}
320
Fenton
window.dispatchEvent(new Event('resize'));
639
avetisk

Mit jQuery können Sie versuchen, trigger aufzurufen:

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

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

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

Kombinieren Sie die 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);
}
37
pfirpfel

Ich war nicht in der Lage, dies mit einer der oben genannten Lösungen zum Laufen zu bringen. Nachdem ich das Event mit jQuery verbunden hatte, funktionierte es wie folgt:

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

gerade

$(window).resize();

benutze ich ... es sei denn, ich verstehe falsch, wonach du fragst.

6
Matt Sich

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);
0
webaholik

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 manuelles Abonnement gewünscht (oder nicht abgewinkelt)

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

Da meine anfängliche startWith Wert ist möglicherweise falsch (Versand zur Korrektur)

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

In say Angular (Ich könnte ..)

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