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.
quelle
Antworten:
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).
quelle
resize
Handler kontinuierlich ausgelöst wird, obwohl Breite und Höhe gleich bleiben. In meinem Fall war es dasdocument
Objekt, das den Handler auslöste und zu einer Endlosschleife führte.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(); } });
quelle
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
setTimeout
umwickelt,resizeListener()
aber ich habe es als Just-in-Case und für zusätzliche Drosselung hineingeworfen.quelle
resizeListener
kann direkt übergeben werden , umsetTimeout()
stattdessen die Stringliteral verwenden"resizeListener();"
.$(window).resize()
, an IE8 zu hängen. Klappt wunderbar. Vielen Dank!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;
quelle
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 });
quelle
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.
quelle
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 );
quelle
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
quelle
(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 ...
quelle
<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++); }
quelle
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 } });
quelle
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
target
auf dem Ereignisobjekt, wenn dieses Problem auftritt?$(window).resize(function(e) { if( e.target != window ) return; // your stuff here });
quelle
Mein Patch:
<!--[if lte IE 7]> <script type="text/javascript"> window.onresize = null; // patch to prevent infinite loop in IE6 and IE7 </script> <![endif]-->
quelle
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
quelle
$(window).resize(function(event) { if (typeof event.target.tagName == 'undefined') { // ... } });
quelle