Frage window.resize Ereignisauslösung in Internet Explorer


Wie Sie wissen, wird im Internet Explorer Das Ereignis window.resize wird ausgelöst, wenn die Größe eines Elements auf der Seite geändert wird. Es spielt keine Rolle, ob die Größe des Seitenelements durch Zuweisen / Ändern des Attributs Höhe oder Stil geändert wird, indem einfach ein untergeordnetes Element hinzugefügt wird, oder was auch immer - obwohl die Größenänderung des Elements die Dimensionen des Darstellungsbereichs nicht beeinflusst.

In meiner Anwendung verursacht dies eine unangenehme Rekursion, da ich in meinem window.resize-Handler einige <li> -Elemente in der Größe verändere, was wiederum window.resize, etc. wieder hervorruft. Dies ist wiederum nur ein Problem im IE.

Gibt es einen Weg dazu? Verhindern Sie, dass window.resize in IE ausgelöst wird, wenn Elemente auf der Seite in der Größe geändert werden?

Ich sollte auch erwähnen, dass ich jQuery benutze.


75
2017-12-05 17:06


Ursprung


Antworten:


Ich habe gerade ein anderes Problem entdeckt, das dir helfen könnte.

Ich benutze jQuery und ich habe window.resize Ereignis, um eine Funktion aufzurufen, die das an den Körper angehängte div neu positionieren wird.

Wenn ich jetzt die Eigenschaft LEFT css dieses angehängten div-Objekts anwähle, erhält das Ereignis window.resize einen Trigger für NO GOOD REASON.

Es ergibt sich eine Endlosschleife, die window.resize immer wieder auslöst.

Der Code ohne Fehler:

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

Lösung:

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

Im Grunde wird es prüfen, ob die Höhe oder Breite geändert wird (was NUR passiert, wenn Sie die Größe des Fensters ändern).


58
2017-12-17 11:55



Das ergab für mich Sinn und scheint in IE7 und darüber zu funktionieren:

    //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



Binden Sie Ihren Größenanpasser mit .one() damit es sich nach dem Abfeuern auflöst. Dann können Sie alles tun, was Sie wollen, solange Sie am Ende den Größenanpassungsempfänger erneut binden. Ich fand den einfachsten Weg, dies zu tun, indem ich den Resize-Listener in eine anonyme Funktion wie folgt setze:

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

    //resize things

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

Du brauchst das technisch nicht setTimeout umwickelt resizeListener() aber ich hatte es als eine gerechte Sache und für eine zusätzliche Drosselung reingeschmissen.


18
2017-11-08 21:21



Ich löste es, indem ich die Funktion zur Größenanpassung aufheben, die Seite neu erstellen und dann die Größenänderungsfunktion erneut binden:

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

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

BEARBEITEN

Bind und unbind gehen mit IE8 nicht gut. Obwohl Microsoft sogar IE8 aufgegeben hat, möchten Sie vielleicht Folgendes versuchen (ungetestet!):

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



@ AamirAfridi.com die Antwort löste mein Problem.

Es ist eine gute Idee, eine allgemeine Funktion zu schreiben, um solche Sachen zu lösen:

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

Verwenden Sie es so, und Sie müssen sich nicht mehr um das unterschiedliche Verhalten in IE sorgen:

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

4
2017-07-26 10:02



Ich bin heute auf dieses Problem gestoßen und habe beschlossen, das Folgende an die Spitze meiner globalen eingeschlossenen Javascript-Datei zu setzen:

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

Das erfordert übrigens Prototype.


1
2017-10-07 15:20



Eine Mischung aus der unbind / bind Methode mit einem verzögerten Aufruf. Es funktioniert in Internet Explorer 8 und darunter, verhindert böse Schleife und hängt an Versionen 6 und 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