等待 document.body 存在

Question

我编写了一个在页面加载之前工作的 Chrome 扩展程序（使用属性"run_at": "document_start" ）。 问题是我想在创建网页主体后立即将div标记添加到它。 在该document.body为 null 之前，我无法向其附加标签。

我不在乎身体的满负荷，我只需要它存在。

我正在尝试找到在创建 html 中的body标签（未完全加载，刚刚创建）时收到警报的最佳方式。 我可以编写这种情况下的任何事件处理程序吗？

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

Answer 1

您可以在document.documentElement上使用一个突变观察者来监听其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

您可以使用类似于$(document).ready() DOMContentLoaded事件

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

MDN说

DOMContentLoaded事件在document完全加载和解析后触发，无需等待样式表、图像和子框架完成加载（ load事件可用于检测完全加载的页面）。

等待 document.body 存在

问题描述

2 个解决方案

解决方案1
12 2014-10-12 11:29:37

解决方案2
6 2014-10-12 11:29:31

等待 document.body 存在

问题描述

2 个解决方案

解决方案1 12 2014-10-12 11:29:37

解决方案2 6 2014-10-12 11:29:31

解决方案1
12 2014-10-12 11:29:37

解决方案2
6 2014-10-12 11:29:31