Pregunta activación del evento window.resize en Internet Explorer


Como sabe, en Internet Explorer, el evento window.resize se activa cuando se cambia el tamaño de cualquier elemento de la página. No importa si el elemento de página se redimensiona asignando / cambiando su altura o atributo de estilo, simplemente agregando un elemento secundario a él, o lo que sea, aunque el cambio de tamaño del elemento no afecte las dimensiones de la ventana gráfica.

En mi aplicación, esto está causando una desagradable recursión, ya que en mi controlador window.resize estoy redimensionando algunos elementos <li>, que a su vez reactivan window.resize, etc. De nuevo, esto es solo un problema en IE.

¿Hay alguna manera de evitar window.resize de disparar en IE en respuesta a los elementos en la página que se cambia el tamaño?

También debería mencionar que estoy usando jQuery.


75
2017-12-05 17:06


origen


Respuestas:


Acabo de descubrir otro problema que podría ayudarte.

Estoy usando jQuery y tengo el evento window.resize para llamar a una función que volverá a colocar el div agregado al cuerpo.

Ahora, cuando configuro la propiedad css IZQUIERDA de ese div anexado, el evento window.resize recibe el desencadenador SIN RAZÓN ADECUADA.

Resulta en un ciclo infinito, lo que activa la ventana. Resize una y otra vez.

El código sin corregir:

$(window).resize(function(){
    var onResize = function(){
        //The method which alter some css properties triggers 
        //window.resize again and it ends in an infinite loop
        someMethod();
    }
    window.clearTimeout(resizeTimeout);
    resizeTimeout = window.setTimeout(onResize, 10);
});

Solución:

var winWidth = $(window).width(),
    winHeight = $(window).height();

$(window).resize(function(){
    var onResize = function(){
        //The method which alter some css properties triggers 
        //window.resize again and it ends in an infinite loop
        someMethod();
    }

    //New height and width
    var winNewWidth = $(window).width(),
        winNewHeight = $(window).height();

    // compare the new height and width with old one
    if(winWidth!=winNewWidth || winHeight!=winNewHeight){
        window.clearTimeout(resizeTimeout);
        resizeTimeout = window.setTimeout(onResize, 10);
    }
    //Update the width and height
    winWidth = winNewWidth;
    winHeight = winNewHeight;
});

Así que, básicamente, comprobará si se cambia la altura o el ancho (lo que sucederá SÓLO cuando cambie el tamaño de la ventana).


58
2017-12-17 11:55



esto tiene sentido para mí y parece funcionar en IE7 y superior:

    //variables to confirm window height and width
    var lastWindowHeight = $(window).height();
    var lastWindowWidth = $(window).width();

    $(window).resize(function() {

        //confirm window was actually resized
        if($(window).height()!=lastWindowHeight || $(window).width()!=lastWindowWidth){

            //set this windows size
            lastWindowHeight = $(window).height();
            lastWindowWidth = $(window).width();

            //call my function
            myfunction();


        }
    });

25
2018-01-08 11:21



Vincula a tu oyente de cambio de tamaño con .one() para que se desenganche luego de disparar. Entonces puede hacer lo que quiera, siempre que al final vuelva a enlazar el oyente de cambio de tamaño. Encontré que la manera más fácil de hacerlo es colocando el oyente de cambio de tamaño en una función anónima como esta:

var resizeListener = function(){
  $(window).one("resize",function(){ //unbinds itself every time it fires

    //resize things

    setTimeout(resizeListener,100); //rebinds itself after 100ms
  });
}
resizeListener();

Técnicamente no necesitas el setTimeout envuelto alrededor del resizeListener() pero lo había arrojado allí como un just-in-case y para un poco de estrangulamiento adicional.


18
2017-11-08 21:21



Lo resolví al desvincular la función de cambio de tamaño, reconstruir la página y luego volver a unir la función de cambio de tamaño:

function rebuild() {
   $(window).unbind('resize');
   /* do stuff here */
   $(window).bind('resize',rebuild);
}

$(window).bind('resize',rebuild);

EDITAR

El enlace y la desvinculación no van bien con IE8. Aunque Microsoft incluso se dio por vencido en IE8 es posible que desee probar esto (no probado):

function rebuild(){
   if(!window.resizing) return false;
   window.resizing=true;
   /* do stuff here */
   window.resizing=false;
}

window.resizing=false;
document.body.onresize=rebuild;

5
2017-10-31 14:07



La respuesta de @AamirAfridi.com resolvió mi problema.

Es una buena idea escribir una función común para resolver ese tipo de cosas:

function onWindowResize(callback) {
    var width = $(window).width(),
        height = $(window).height();

    $(window).resize(function() {
        var newWidth = $(window).width(),
            newHeight = $(window).height();

        if (newWidth !== width || newHeight !== height) {
            width = newWidth;
            height = newHeight;
            callback();
        }
    });
}

Úselo así, y ya no tendrá que preocuparse por los diferentes comportamientos en IE:

onWindowResize(function() {
    // do something
});

4
2017-07-26 10:02



Me encontré con este problema hoy y decidí poner lo siguiente en la parte superior de mi archivo javascript incluido global:

var savedHeight = 0;
var savedWidth = 0;
Event.observe(window, 'resize', function (e) {
    if (window.innerHeight == savedHeight && 
        window.innerWidth == savedWidth) { e.stop(); }
    savedHeight = window.innerHeight;
    savedWidth = window.innerWidth;
});

Eso requiere Prototipo, por cierto.


1
2017-10-07 15:20



Una mezcla de unbind / bind método con una llamada demorada. Funciona en Internet Explorer 8 y versiones posteriores, lo que evita el mal loop y se bloquea en las versiones 6 y 7.

function resizeViewport()
{
    // Unbind and rebind only for IE < 9
    var isOldIE = document.all && !document.getElementsByClassName;

    if( isOldIE )
        $(window).unbind( 'resize', resizeViewport );

    // ...

    if( isOldIE )
    {
        setTimeout(function(){
            $(window).resize( resizeViewport );
        }, 100);
    }
}

$(window).resize( resizeViewport );

1
2017-08-22 16:07