Búsqueda de sitios web

Evento de cambio de tamaño de ventana compatible con múltiples navegadores - JavaScript/jQuery


¿Cuál es el método correcto (moderno) para acceder al evento de cambio de tamaño de la ventana que funciona en Firefox, WebKit e Internet Explorer?

¿Y puedes activar/desactivar las dos barras de desplazamiento?

Respuesta #1

jQuery tiene un método incorporado para esto:

$(window).resize(function () { /* do something */ });

Por el bien de la capacidad de respuesta de la interfaz de usuario, podrías considerar usar un setTimeout para llamar a tu código solo después de cierto número de milisegundos, como se muestra en el siguiente ejemplo, inspirado en esto:

function doSomething() {
    alert("I'm done resizing for the moment");
};

var resizeTimer;
$(window).resize(function() {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(doSomething, 100);
});

Respuesta #2

$(window).bind('resize', function () { 

    alert('resize');

});

Respuesta #3

Aquí está la forma de acceder al evento de cambio de tamaño sin jQuery:

window.addEventListener('resize', function(event){
  // do stuff here
});

Funciona en todos los navegadores modernos. No retrasa nada por ti. Aquí hay un ejemplo de ello en acción.

Respuesta #4

Lo siento por sacar a relucir un hilo antiguo, pero si alguien no quiere usar jQuery puede usar esto:

function foo(){....};
window.onresize=foo;

Artículos relacionados