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

Question

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

Encontré window.resizeTo() puede activar la función, pero ¿hay alguna otra solución?

Answer 1

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 posee el código.

window.onresize = doALoadOfStuff; 

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

En este ejemplo, se puede llamar a la función doALoadOfStuff sin el envío de un evento.

En sus navegadores modernos, puede trigger the event usando:

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

esto no funciona en Internet Explorer, en el que tendrá que hacer la escritura a mano:

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

jQuery has the trigger method, que funciona de la siguiente manera:

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

Answer 2

con jQuery, se puede tratar de llamar trigger:

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

Answer 3

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

Answer 4

window.resizeBy() activará onresize de ventana evento. Esto funciona tanto en Javascript o VBScript.

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

Answer 5

No pude hacer que funcionara con ninguna de las soluciones anteriores. Una vez que el evento ligado con jQuery entonces funcionó bien como a continuación:

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

Answer 6

simplemente

$(window).resize(); 

es lo que yo uso ... a menos que mal lo que está pidiendo.

Answer 7

Un JS puro, que también funciona en IE (de @Manfred comment)

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

Answer 8

Combinando las respuestas de pomber y avetisk de cubrir todos los navegadores y no advertencias que causan:

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