我未能在 document.body 上观察到 document.write。这是代码:
<script>
var observeDOM = (function(){
var MutationObserver = window.MutationObserver || window.WebKitMutationObserver,
eventListenerSupported = window.addEventListener;
return function(obj, callback){
if( MutationObserver ){
// define a new observer
var obs = new MutationObserver(function(mutations, observer){
if( mutations[0].addedNodes.length || mutations[0].removedNodes.length )
callback();
});
// have the observer observe foo for changes in children
obs.observe( obj, { childList:true, subtree:true });
}
else if( eventListenerSupported ){
obj.addEventListener('DOMNodeInserted', callback, false);
obj.addEventListener('DOMNodeRemoved', callback, false);
}
}
})();
window.onload = function() {
//console.log("dom ready");
// Observe a specific DOM element:
observeDOM( document.body ,function(){
console.log('dom changed');
});
}
function reload() {
document.write("<input type=\"submit\" onclick=\"reload();\" value=\"Reload\" />");
//var text = document.createTextNode("abc");
//document.body.appendChild(text);
}
</script>
<body>
<input type="submit" onclick="reload();" value="Reload" />
</body>
当我点击 Reload 按钮时，没有任何记录。但是，如果我将 window.onload 中的代码更改为:
observeDOM( document ,function(){ // change first parameter to *document*
console.log('dom changed');
});
然后点击Reload，控制台输出dom changed。谁能告诉为什么？我使用的是 Chrome v50。
最佳答案
我今天找到原因了。似乎 document.write() 用新的覆盖了旧的 document.body。由于 MutationObserver 附加到旧的 document.body，它无法观察新的 body 上的 DOM 变化。
我是这样测试的:
关于javascript - 为什么不能使用 MutationObserver API 观察 document.body 上的 document.write？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37110926/