Question

我写了一个chrome扩展，在页面加载之前工作（使用属性"run_at": "document_start"）。问题是我想在网页正文创建后立即添加div标记。在此document.body为空之前，我无法为其添加标记。

我不关心身体的全部负荷，我只是需要它存在。

我正在尝试找到创建html中body标记时的最佳警报方式（未完全加载，刚刚创建）。我可以写这个案例的事件处理程序吗？

另外，我不想使用jQuery或任何其他非内置库。

谢谢！

Answer 1

您可以document.documentElement使用mutation observer收听childList的更改，并查看添加的内容是body。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Example</title>
  <script>
    (function() {
      "use strict";

      var observer = new MutationObserver(function() {
        if (document.body) {
          // It exists now
          document.body.insertAdjacentHTML(
            "beforeend",
            "<div>Found <code>body</code></div>"
          );
          observer.disconnect();
        }
      });
      observer.observe(document.documentElement, {childList: true});
    })();
  </script>
</head>
<body>
  <div id="foo"></div>
</body>
</html>

Answer 2

您可以使用与DOMContentLoaded

类似的$(document).ready()事件

document.addEventListener("DOMContentLoaded", function(event) {
   console.log("DOM fully loaded and parsed");
});

MDN说

DOMContentLoaded时document事件被触发完全加载和解析，无需等待样式表，图像，和子帧完成加载（load事件可用于检测一个完整的页面。）

等待document.body存在

2 个答案: