Wie Sie wissen, wird in Internet Explorer das Ereignis window.resize 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 seiner Höhe oder seines Stilattributs, durch einfaches Hinzufügen eines untergeordneten Elements oder was auch immer geändert wird - auch wenn die Größenänderung des Elements keine Auswirkungen auf die Abmessungen des Ansichtsfensters selbst hat.

In meiner Anwendung führt dies zu einer unangenehmen Rekursion, da ich in meinem window.resize-Handler die Größe einiger <li> -Elemente ändere, wodurch wiederum window.resize usw. neu ausgelöst wird. Auch dies ist nur ein Problem im IE.

Gibt es eine Möglichkeit zu verhindern , dass window.resize im IE als Reaktion auf Elemente auf der Seite ausgelöst wird, deren Größe geändert wird?

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

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

Ich verwende jQuery und habe das Ereignis window.resize, um eine Funktion aufzurufen, die das an den Body angehängte div neu positioniert.

Wenn ich nun die LEFT-CSS-Eigenschaft dieses angehängten Divs festlege, wird das window.resize-Ereignis für NO GOOD REASON ausgelöst.

Dies führt zu einer Endlosschleife, die immer wieder die Größe des Fensters auslöst.

Der Code ohne Fix:

$(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 also geprüft, ob die Höhe oder Breite geändert wird (was NUR dann geschieht, wenn Sie die Größe tatsächlich mit dem Fenster ändern).

Dies ergab für mich einen Sinn und scheint in IE7 und höher 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();


        }
    });

Binden Sie Ihren Größenänderungs-Listener .one()so, dass er sich nach dem Brennen löst. Dann können Sie alles tun, was Sie wollen, solange Sie am Ende den Listener für die Größenänderung neu binden. Ich fand den einfachsten Weg, dies zu tun, indem ich den Größenänderungs-Listener in eine anonyme Funktion wie folgt versetzte:

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

    //resize things

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

Sie brauchen das technisch nicht setTimeoutumwickelt, resizeListener()aber ich habe es als Just-in-Case und für zusätzliche Drosselung hineingeworfen.

Ich habe es gelöst, indem ich die Größenänderungsfunktion aufgehoben, die Seite neu erstellt und dann die Größenänderungsfunktion erneut gebunden habe:

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

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

BEARBEITEN

Binden und Aufheben der Bindung passt nicht gut zu IE8. Obwohl Microsoft IE8 sogar aufgegeben hat, möchten Sie dies vielleicht 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;

Die Antwort von @ AamirAfridi.com hat mein Problem gelöst.

Es ist eine gute Idee, eine gemeinsame Funktion zu schreiben, um solche Probleme 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 keine Gedanken mehr über das unterschiedliche Verhalten im IE machen:

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

Ich bin heute auf dieses Problem gestoßen und habe beschlossen, Folgendes oben in meine globale Javascript-Datei aufzunehmen:

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.

Eine Mischung der unbind/ bind-Methode mit einem verzögerten Aufruf. Es funktioniert in Internet Explorer 8 und niedriger, verhindert böse Schleifen und hängt an den 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 );

Sie können dies versuchen:

Konstrukteur:

this.clientWidth = null;
this.clientHeight = null;

Einige Funktionen:

var clientWidth = window.innerWidth || document.documentElement.clientWidth; 
var clientHeight = window.innerHeight || document.documentElement.clientHeight;
if (clientWidth != this.clientWidth || clientHeight != this.clientHeight ) {
    this.clientWidth = clientWidth;
    this.clientHeight = clientHeight;

    ... YOUR CODE ...
} 

Für Internet Explorer, Chrome, Firefox, Opera und Safari:

window.innerHeight - the inner height of the browser window
window.innerWidth - the inner width of the browser window

Für Internet Explorer 8, 7, 6, 5:

document.documentElement.clientHeight
document.documentElement.clientWidth
    or
document.body.clientHeight
document.body.clientWidth

(function ($){
     //if ie8 -> return;
     var lastHeight = 0;
     var lastWidth = 0;
     $(window).resize(function(event){
         if (window.innerHeight == lastHeight && window.innerWidth == lastWidth)
             { event.stopImmediatePropagation(); }
         lastHeight = window.innerHeight;
         lastHeight = window.innerWidth;
     });
})();

macht den Trick für mich ...

<pre>



var cont = 0;
var tmRsize = 100;
var lastWindowWidth = $(window).width();
var lastWindowHeight = $(window).height();

/*****redimensionamiento**********/
$(window).resize(function()
{
    if($(window).width() != lastWindowWidth || $(window).height() != lastWindowHeight)
    {
        clearTimeout(this.id);
        this.tiempo = tmRsize;
        this.id = setTimeout(doResize, this.tiempo);
    }
});

function doResize()
{
    lastWindowWidth = $(window).width();
    lastWindowHeight = $(window).height();

    $('#destino_1').html(cont++);
}

So gehe ich damit um, herauszufinden, ob das Größenänderungsereignis von einem Element ausgelöst wurde oder das Fenster wirklich in der Größe geändert wurde:

Wenn der target.nodeType des Ereignisses nicht vorhanden ist, handelt es sich höchstwahrscheinlich um das Fenster, da jedes andere Element auf der Seite einen nodeType haben würde.

Hier ist also der Pseudocode (mit jQuery) mit der hinzugefügten Prüfung:

$(window).resize(function(event){
    if ( $(event.target.nodeType).length == 0 ){
        // Anything here is run when the window was resized
        // not executed when an element triggered the resize
    }
});

Ich konnte das Größenänderungsereignis nicht auslösen, wenn die Größe eines Elements geändert wurde (allerdings nur in IE8 versucht).

Was ist jedoch targetauf dem Ereignisobjekt, wenn dieses Problem auftritt?

$(window).resize(function(e) {
    if( e.target != window ) return;
    // your stuff here
});

Mein Patch:

<!--[if lte IE 7]>
<script type="text/javascript">
  window.onresize = null;       // patch to prevent infinite loop in IE6 and IE7
</script>
<![endif]-->

Es hängt davon ab, wie der Inhalt des Größenänderungsereignisses ist.

Ich habe die obigen Lösungen nur herausgefunden, wenn eine Seite aus statischen Inhalten besteht, nicht aus dynamisch gerenderten. In dem dynamischen Fall, in dem der vorhandene Inhalt durch ein Auslöseereignis wie eine Funktion zum erneuten Laden von Inhalten neu gerendert wird, müssen wir stattdessen $ (document) .width () oder $ (document) .height () verwenden.

Dies liegt an der Bildlaufleiste des Fensters. Wenn eine Seite über eine Bildlaufleiste verfügt und der Hauptinhalt durch Klicken auf die Schaltfläche „Neu laden“ neu gerendert wird, verschwindet die Bildlaufleiste beim Ereignis. In diesem Fall wird $ (Fenster) .width () oder $ (Fenster) .height () durch das Rendern des Inhalts geändert, nicht durch die tatsächliche Fenstergröße.

http://www.tech-step.net/?p=466

$(window).resize(function(event)
{
    if (typeof event.target.tagName == 'undefined')
    {
        // ...
    }
});