Jak wywołać zdarzenie zmiany rozmiaru okna w JavaScript?

Zarejestrowałem wyzwalacz przy zmianie rozmiaru okna. Chcę wiedzieć, jak mogę wywołać zdarzenie, które ma zostać wywołane. Na przykład, gdy ukrywa div, chcę, aby moja funkcja wyzwalacza została wywołana.

Znalazłem, że window.resizeTo()może uruchomić tę funkcję, ale czy jest jakieś inne rozwiązanie?

Tam, gdzie to możliwe, wolę wywołać funkcję niż wywołać zdarzenie. Działa to dobrze, jeśli masz kontrolę nad kodem, który chcesz uruchomić, ale poniżej znajdziesz przypadki, w których nie masz kodu.

window.onresize = doALoadOfStuff;

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

W tym przykładzie możesz wywołać doALoadOfStufffunkcję bez wywoływania zdarzenia.

W nowoczesnych przeglądarkach możesz wywołać zdarzenie, używając:

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

To nie działa w Internet Explorerze, gdzie będziesz musiał zrobić długą rękę:

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

jQuery ma triggermetodę , która działa w następujący sposób:

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

I ma zastrzeżenie:

Chociaż .trigger () symuluje aktywację zdarzenia wraz ze zsyntetyzowanym obiektem zdarzenia, nie doskonale replikuje naturalnie występującego zdarzenia.

Możesz także symulować zdarzenia dotyczące określonego elementu ...

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

Za pomocą jQuery możesz spróbować wywołać wyzwalacz :

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

Czysty JS, który działa również w IE (od komentarza @Manfred )

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

Lub kątowe:

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

Łącząc odpowiedzi pomber i avetisk, aby objąć wszystkie przeglądarki i nie powodować ostrzeżeń:

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

W rzeczywistości nie byłem w stanie zmusić tego do pracy z żadnym z powyższych rozwiązań. Po powiązaniu wydarzenia z jQuery działało dobrze, jak poniżej:

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

właśnie

$(window).resize();

to jest to, czego używam ... chyba że źle zrozumiem, o co prosisz.

Odpowiedź z RxJS

Powiedz jak coś w Angular

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

Jeśli wymagana jest subskrypcja ręczna (lub nie kątowa)

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

Ponieważ mój początkowy początek z wartością może być niepoprawny (wysłanie do korekty)

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

Mówiąc Angular (mógłbym ...)

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

Uważam, że powinno to działać dla wszystkich przeglądarek:

var event;
if (typeof (Event) === 'function') {
    event = new Event('resize');
} else { /*IE*/
    event = document.createEvent('Event');
    event.initEvent('resize', true, true);
}
window.dispatchEvent(event);

Możesz to zrobić za pomocą tej biblioteki. 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()wywoła zdarzenie onresize okna. Działa to zarówno w JavaScript, jak i VBScript .

window.resizeBy(xDelta, yDelta)nazywa się jak window.resizeBy(-200, -200)zmniejszyć stronę 200 na 200 pikseli.