Como disparar o evento de redimensionamento de janela em JavaScript?

Registrei um gatilho no redimensionamento da janela. Quero saber como posso acionar o evento a ser chamado. Por exemplo, quando ocultar uma div, quero que minha função de gatilho seja chamada.

Descobri que window.resizeTo()pode disparar a função, mas existe alguma outra solução?

Sempre que possível, prefiro chamar a função em vez de despachar um evento. Isso funciona bem se você tiver controle sobre o código que deseja executar, mas veja abaixo os casos em que você não possui o código.

window.onresize = doALoadOfStuff;

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

Neste exemplo, você pode chamar a doALoadOfStufffunção sem despachar um evento.

Nos navegadores modernos, você pode acionar o evento usando:

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

Isso não funciona no Internet Explorer, onde você terá que fazer isso à mão:

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

O jQuery possui o triggermétodo , que funciona assim:

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

E tem a ressalva:

Embora .trigger () simule uma ativação de evento, completa com um objeto de evento sintetizado, ele não replica perfeitamente um evento que ocorre naturalmente.

Você também pode simular eventos em um elemento específico ...

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

Com o jQuery, você pode tentar chamar o trigger :

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

Um JS puro que também funciona no IE (do comentário do @Manfred )

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

Ou para angular:

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

Combinando as respostas de pomber e avetisk para cobrir todos os navegadores e não causar avisos:

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

Na verdade, não consegui fazer isso funcionar com nenhuma das soluções acima. Depois que vinculei o evento ao jQuery, ele funcionou bem como abaixo:

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

somente

$(window).resize();

é o que eu uso ... a menos que eu entenda mal o que você está pedindo.

Resposta com RxJS

Diga como algo em Angular

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

Se a assinatura manual desejar (ou não angular)

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

Como meu valor inicial startWith pode estar incorreto (envio para correção)

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

Em dizer angular (eu poderia ..)

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

Eu acredito que isso deve funcionar para todos os navegadores:

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

Você pode fazer isso com esta biblioteca. 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()acionará o evento onresize da janela. Isso funciona em Javascript ou VBScript .

window.resizeBy(xDelta, yDelta)chamado gostaria window.resizeBy(-200, -200)de reduzir a página 200 px por 200 px.