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

Ich war nicht wirklich in der Lage, dies mit einer der oben genannten Lösungen zu arbeiten. Sobald ich das Ereignis mit jQuery gebunden, dann funktionierte es gut wie unten:

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

Answer 2

Nur

$(window).resize();

ist das, was ich verwende... es sei denn, ich verstehe nicht, wonach Sie fragen.

Answer 3

Ich glaube, das sollte bei allen Browsern 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);

Answer 4

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 angular)

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

Seit meiner anfänglichen startWith Wert könnte falsch sein (Versand zur Korrektur)

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

In sagen wir Angular (ich könnte..)

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

Answer 5

window.resizeBy() löst das Ereignis onresize des Fensters aus. Dies funktioniert sowohl in Javascript ou VBScript .

window.resizeBy(xDelta, yDelta) genannt wie window.resizeBy(-200, -200) um die Seite um 200x200 Pixel zu verkleinern.