等待 document.body 存在

Question

I wrote a Chrome extension that works before the page is loaded (using the attribute "run_at": "document_start" ).我编写了一个在页面加载之前工作的 Chrome 扩展程序（使用属性"run_at": "document_start" ）。 The problem is that I want to add a div tag to the web page body as soon as it is created.问题是我想在创建网页主体后立即将div标记添加到它。 Before that document.body is null so I can't append tags to it.在该document.body为 null 之前，我无法向其附加标签。

I don't care about full load of the body, I just need it to be existent.我不在乎身体的满负荷，我只需要它存在。

I am trying to find the best way to be alerted when the body tag in html is created (not loaded fully, just created).我正在尝试找到在创建 html 中的body标签（未完全加载，刚刚创建）时收到警报的最佳方式。 Is there any event handler for this case that I can write?我可以编写这种情况下的任何事件处理程序吗？

Also, I don't want to use jQuery or any other non built-in library.另外，我不想使用jQuery或任何其他非内置库。

Answer 1

You could use a mutation observer on document.documentElement listening for changes to its childList and looking to see whether the thing that got added is body .您可以在document.documentElement上使用一个突变观察者来监听其childList变化，并查看添加的内容是否是body 。

Example: 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>

Answer 2

You can use DOMContentLoaded event which is similar to $(document).ready()您可以使用类似于$(document).ready() DOMContentLoaded事件

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

MDN says MDN说

The DOMContentLoaded event is fired when the document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading (the load event can be used to detect a fully-loaded page). 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