当在window.addEventListener("load "function () {})中给出突变观察器时，它不能工作。

Question

这就是完美工作的mutationobserver代码。

var overlay = document.createElement('div');
overlay.setAttribute("class", "banner");

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    if (mutation.type == "childList")  {
      var elem = document.getElementById('banner');
      if(elem) {
        elem.parentNode.insertBefore(overlay, elem.nextSibling);
        observer.disconnect();    
      }
    }
  })
})

/// The part I'am going to put inside window.addEventListener("load" function () {}); ////

var elemBody = document.getElementsByTagName("body")[0];
observer.observe(elemBody, {
  childList: true,
  subtree: true,
})

上面的代码是在Html的body里面的js文件中给出的，工作正常。我想把js文件移到Html的头部。所以把同样的代码放在head中会出现错误，因为执行时elemBody没有加载。

var elemBody = document.getElementsByTagName("body")[0];  ///this line throws error

所以我给了一个window.addEventListener("load "function() {});这样body就加载了，然后mutation observer开始观察，但它没有工作。

window.addEventListener("load", function () {
  var elemBody = document.getElementsByTagName("body")[0];
    observer.observe(elemBody, {
      childList: true,
      subtree: true,
    })
});

Answer 1

尝试使用if(window.onload){function...}。

同时使用document.body代替document.getElementsByTagName。

PS：我认为，如果你的代码依赖于页面的部分内容，必须将代码放在body标签的底部才能成功执行。

Answer 2

你可以使用 document.onreadystatechange,

试试这个

document.onreadystatechange = function () {
    if (document.readyState === "complete") {
        // Your code 
    }
}