等待 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