等待文档正文存在

我编写了一个在页面加载之前工作的Chrome扩展程序(使用属性"run_at": "document_start"(。问题是我想在创建网页正文后立即向网页正文添加 div 标签。在此之前，document.body为空，因此我无法向其附加标签。

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

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

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

您可以使用突变观察器来监听其childList的变化document.documentElement并查看添加的内容是否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>

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

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

MDN 说

DOMContentLoaded当document 完全加载和解析，无需等待样式表、图像、和子帧以完成加载(load事件可用于检测完全加载的页面(。

相关内容

最新更新

热门标签：