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

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?

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

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

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

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

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

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

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

gerade

$(window).resize();

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

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" >..

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

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

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.