tablas - onfocus javascript ejemplo

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

Question

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

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

Answer 1

Combinando las respuestas de pomber y avetisk para cubrir todos los navegadores y no provocar 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);
}

Answer 2

Con jQuery, puedes intentar llamar a trigger :

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

Answer 3

Donde 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 función doALoadOfStuff sin enviar un evento.

En sus navegadores modernos, puede activar el evento utilizando:

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 método de trigger , 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 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);
}

Answer 4

No pude conseguir que esto funcionara con ninguna de las soluciones anteriores. Una vez que limité el evento con jQuery, funcionó bien como se muestra a continuación:

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

Answer 5

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

Answer 6

sólo

$(window).resize();

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

Answer 7

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 200px por 200px.

Answer 8

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