2016-05-09 22 views
1

Ich habe document.write auf document.body nicht beachtet. Hier ist der Code:Warum kann document.write auf document.body nicht mit MutationObserver API beobachtet werden?

<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> 

Wenn ich auf Reload Taste, nichts protokolliert. Aber wenn ich Code ändern in window.onload zu:

observeDOM(document ,function(){ // change first parameter to *document* 
    console.log('dom changed'); 
}); 

und klicken Sie dann auf Reload, Konsolausgaben dom changed. Kann jemand sagen warum? Ich verwende Chrome v50.

Antwort

0

Ich finde den Grund heute. Es scheint, dass document.write() alte document.body mit einem neuen deckt. Da MutationObserver an den alten document.body angehängt wurde, kann DOM nicht an der neuen Version body beobachtet werden.

Hier ist, wie ich es getestet:

enter image description here