等待document.body存在

问题描述 投票:6回答:2

我写了一个chrome扩展,在页面加载之前工作(使用属性"run_at": "document_start")。问题是我想在网页正文创建后立即添加div标记。在那之前document.body为null所以我不能附加标签。

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

我正在尝试找到在html中创建body标签时提醒的最佳方式(未完全加载,刚刚创建)。我可以写这个案例的事件处理程序吗?

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

谢谢!

javascript html css javascript-events event-handling
2个回答
7
投票

你可以在mutation observer上使用document.documentElement听取其childList的变化,并期待看到添加的东西是否是body

示例:Live Copy

<!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>

4
投票

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

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

MDN

DOMContentLoaded事件在document完全加载和解析后触发,无需等待样式表,图像和子帧完成加载(load事件可用于检测完全加载的页面)。

© www.soinside.com 2019 - 2024. All rights reserved.