在 window.addEventListener("load" function () {});答案

【问题标题】：Mutation observer does not work when given in window.addEventListener("load" function () {});在 window.addEventListener("load" function () {});
【发布时间】：2020-09-29 17:49:48
【问题描述】：

这是完美运行的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,
})

上面的代码是在一个 js 文件中给出的，它位于 Html 的主体内，工作正常。我想将 js 文件移动到 Html 的头部。因此，将相同的代码放在 head 中会引发错误，因为执行时未加载 elemBody。

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

所以我给了一个 window.addEventListener("load" function () {});这样身体就会加载，然后变异观察者开始观察，但它不起作用。

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

【问题讨论】：

事件监听器怎么不能工作？还是报错？
@Homungus 在 EventListener 之前工作正常，当我将上面指定的部分包装在 EventListener 中时它不起作用
所以我明白了：首先你的代码在没有事件监听器的身体里——一切正常。然后你把你的代码放在头上——getElementsByTagName 抛出一个异常。然后你把你的observer.observe 方法放在window.load 中，你又得到一个异常？
@Homungus 没错！我不知道observer.observe 方法是否可以在window.load 中工作
你检查过你的事件监听器是否被调用了吗？就像在您的事件侦听器主体中使用 console.log 一样？你有更多的代码要分享吗？你的标记等？

标签： javascript mutation-observers

【解决方案1】：

你可以使用document.onreadystatechange，

试试这个

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

【讨论】：