等待document.body的存在

我寫了一個chrome擴展，在頁面加載之前工作（使用屬性"run_at": "document_start"）。問題是，我想在創建網頁主體後立即將div標記添加到網頁主體中。在此之前document.body爲空，因此我無法在其上附加標籤。等待document.body的存在

我不在乎身體的全部負荷，我只是需要它存在。

我試圖找到在html中創建body標記時（未完全加載，剛剛創建）的最佳提示方式。是否有任何可以寫入的事件處理程序？

此外，我不想使用jQuery或任何其他非內置庫。

謝謝！

來源

2014-10-12 Ygandelsman

您可以使用DOMContentLoaded事件，這類似於$(document).ready()

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

MDN說

當document已經完全加載和解析的DOMContentLoaded事件被觸發，無需等待樣式表，圖像，和子幀完成加載（load事件可用於檢測一個完全加載頁面）。

來源

2014-10-12 11:29:31

你可以在document.documentElement使用mutation observer監聽改變其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>

來源

2014-10-12 11:29:37

編輯：爲@michaelday解釋這其實是一種不好的做法，因爲它利用池，它可以採取寶貴的CPU資源

有什麼不對有關使用像這樣一個非常簡單的功能？

/* This function waits until document.body exists*/ 
     function tryToAppend(node){ 
      if(!document.body){ 
       return setTimeout(tryToAppend.bind(null,node),1); 
      } 
      document.body.appendChild(node, document.body.firstChild); 
     }

來源

2017-01-06 21:51:20 Danielo515

這是一個恥辱沒有人回答這個問題 - 你不想這樣做的原因是因爲輪詢需要每毫秒運行這個函數，這是資源的消耗。雖然技術上可行，但如果您可以使用某種事件，則應避免一般性的投票。您的回答沒有錯，只是這不是最好的方法。 – michaelday 2017-12-20 07:26:08

感謝您花時間解釋@michaelday。你的觀點非常有意義並且很好地暴露出來。 – Danielo515 2017-12-20 10:51:53

等待document.body的存在

回答

相關問題