¿Cómo activar el evento de cambio de tamaño de ventana en JavaScript?

He registrado un disparador en el cambio de tamaño de la ventana. Quiero saber cómo puedo activar el evento para que se llame. Por ejemplo, cuando oculto un div, quiero que se llame a mi función de activación.

Descubrí que window.resizeTo()puede activar la función, pero ¿hay alguna otra solución?

Siempre que sea posible, prefiero llamar a la función en lugar de enviar un evento. Esto funciona bien si tiene control sobre el código que desea ejecutar, pero vea a continuación los casos en los que no posee el código.

window.onresize = doALoadOfStuff;

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

En este ejemplo, puede llamar a la doALoadOfStufffunción sin enviar un evento.

En sus navegadores modernos, puede activar el evento usando:

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

Esto no funciona en Internet Explorer, donde tendrá que hacer la mano dura:

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

jQuery tiene el triggermétodo , que funciona así:

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

Y tiene la advertencia:

Aunque .trigger () simula una activación de evento, completa con un objeto de evento sintetizado, no replica perfectamente un evento natural.

También puede simular eventos en un 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'));

Con jQuery, puede intentar llamar al activador :

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

Un JS puro que también funciona en IE (del comentario de @Manfred )

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

O para angular:

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

Combinando las respuestas de pomber y avetisk para cubrir todos los navegadores y sin causar advertencias:

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

En realidad no pude hacer que esto funcionara con ninguna de las soluciones anteriores. Una vez que vinculé el evento con jQuery, funcionó bien de la siguiente manera:

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

sólo

$(window).resize();

es lo que uso ... a menos que no entienda mal lo que está pidiendo.

Respuesta con RxJS

Di como algo en angular

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

Si desea una suscripción manual (o no angular)

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

Dado que mi valor inicial startWith podría ser incorrecto (envío para corrección)

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

En decir Angular (podría ...)

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

Creo que esto debería funcionar para todos los 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);

Puedes hacer esto con 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()activará el evento onresize de la ventana. Esto funciona tanto en Javascript como en VBScript .

window.resizeBy(xDelta, yDelta)llamado como window.resizeBy(-200, -200)para reducir la página 200 px por 200 px.