¿Cómo activar el evento de cambio de tamaño de ventana en JavaScript?
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?
window.dispatchEvent(new Event('resize'));
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 doALoadOfStuff
funció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 trigger
mé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);
}
Con jQuery, puedes intentar llamar al disparador :
$(window).trigger('resize');
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);
}