JavaScript MutationObserver ruft rekursiv sich selbst auf

Question

Ich versuche MutationObserver zu verwenden, um Änderungen des Stilattributs im body-Element zu beobachten und die Überlaufeigenschaft des Stilattributs body zu ändern. Das Stilattribut ändert sich, wenn ich das Browserfenster verkleinere. Firefox landet abstürzt sagen nicht reagierende Skript. Kann jemand darauf hinweisen, was ich hier falsch mache. Es scheint jedoch in Chrome richtig zu funktionieren.

Mein Code:

var target=document.body; 

var Observer=new MutationObserver(function(mutations) { 

    mutations.forEach(function(mutationRecord){ 
     document.body.style.overflow="auto"; 
    }); 

}); 

Observer.observe(target,{attributes:true,attributeFilter:['style']}); 

Answer 1

Ich würde aussehen dies auf Root-Ebene zu lösen: Warum haben verschiedene Teile des Codes über die document.body.style.overflow Eigentum kämpfen wollen?

Aber die Mutation Beobachter Frage zu beantworten:

Wenn Ihr Ziel ist es sicherzustellen, dass document.body.style.overflow-"auto" gesetzt ist, unabhängig von Änderungen, um es an anderer Stelle gemacht, würde ich es nur dann zu ändern, wenn es Ihnen nicht der Wert ist:

var Observer=new MutationObserver(function(mutations) { 
    if (document.body.style.overflow != "auto") { 
     document.body.style.overflow = "auto" 
    } 
}); 

Observer.observe(document.body,{attributes:true,attributeFilter:['style']}); 

Beachten Sie auch, dass die forEach Schleife nicht benötigt wird.

Bei einer Schätzung würde ich sagen, Firefox feuert die Mutation Beobachter, auch wenn die Eigenschaft nicht tatsächlich geändert hat, aber Chrome ist nicht.

---

Randbemerkung: Wieder sage ich würde es besser wäre, und mit der Tatsache umgehen zu finden Ihren Code scheint mit sich selbst zu kämpfen. Aber als Alternative zu einer Workaround-Umgehung der Mutations-Beobachter, hier eine CSS-Problemumgehung: Eine !important Regel in einem Stylesheet überschreibt einen normalen Inline-Stil. So

body { 
    overflow: auto !important; 
} 

Nun, das wird nicht außer Kraft setzen document.body.style.overflow = "none !important", aber es wird jede nicht-wichtige Regel außer Kraft setzen, auch einen Inline-Stil ein.

Answer 2

Ihr Problem ist, auf der Leitung:

document.body.style.overflow="auto"; 

Im Grunde ist es schafft eine Endlosschleife, die den Browser Javascript Stackgröße Grenze übertreffen könnte.

Mit Ihrem Code beobachten Sie die Körperdom, und wenn eine Änderung in Körperdom vorgenommen wird, ändern Sie es tatsächlich Stil wieder, das geht für immer.