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

Resuelto zhongshu asked hace 14 años • 10 respuestas

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

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

zhongshu avatar Nov 30 '09 15:11 zhongshu
Aceptado
window.dispatchEvent(new Event('resize'));
avetisk avatar Sep 09 '2013 07:09 avetisk

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 consulte a continuación los casos en los que no es propietario del 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ás que hacerlo a mano:

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 la activación de un evento, completo con un objeto de evento sintetizado, no replica perfectamente un evento que ocurre naturalmente.

También puedes 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);
}
Fenton avatar Nov 30 '2009 08:11 Fenton

Con jQuery, puedes intentar llamar al disparador :

$(window).trigger('resize');
Benjamin Crouzier avatar Apr 12 '2013 12:04 Benjamin Crouzier

Combinando las respuestas de pomber y avetisk para cubrir todos los navegadores y no generar 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);
}
pfirpfel avatar May 08 '2017 11:05 pfirpfel