JavaScript MutationObserverが再帰的に呼び出す

Question

body要素のスタイル属性の変更を監視するためにMutationObserverを使用し、bodyのstyle属性のオーバーフロープロパティをscroll.Theスタイル属性がブラウザウィンドウを小さくすると変更します。 Firefoxが応答しないscript.Can誰かが私がここで何を間違っているかを指摘することができないとクラッシュする。それはクロムで正しく動作するようだ。

マイコード：

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

私は、ルートレベルでこれを解決するために見てね：なぜあなたのコードの異なる部分がdocument.body.style.overflow財産争いをしたいですか？

しかし、突然変異オブザーバの質問に答える：あなたの目標はdocument.body.style.overflowは関係なく、他の場所でそれに加えられた変更の"auto"に設定されている、それはあなたが必要な値ではない場合、私はそれを変更したいことを確実にするためであれば

を：

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

また、forEachループは必要ありません。

実際にはプロパティが変更されていないのにFirefoxが突然変異の観測者を発砲していると言えますが、Chromeはそうではありません。

---

サイドノート：もう一度、自分のコードが自分自身と戦っているように見えることがわかります。しかし、変異オブザーバの回避策の代わりにCSS回避策があります：スタイルシートの!importantルールは、通常のインラインスタイルよりも優先されます。だから、

body { 
    overflow: auto !important; 
} 

さて、それはdocument.body.style.overflow = "none !important"を上書きしないだろうが、それは、任意の非重要なルール、でもインラインスタイル1を上書きします。

Answer 2

あなたの問題は、ライン上にある：

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

は、基本的には、ブラウザのJavascriptスタックサイズ制限を超える可能性が無限ループを作成します。

あなたのコードで、あなたはボディドームを観察しています。ボディドームに変更が加えられたら、実際にスタイルを再び変更します。これは永遠に続きます。