何時調用document.appendChild（）？

Question

在我的網頁我動態添加腳本這樣的功能：

function addScript(src) { 
    var s = document.createElement('script'); 
    s.setAttribute('src', src); 
    document.body.appendChild(s); 
} 

我想知道，但如果我必須等待該文檔在此之前被加載。文件中的文本可能沒有準備好嗎？

我使用這個的時刻：如果

document.onreadystatechange = function() { 
     if (typeof document.body !== 'undefined') { 
      addScript('http://my.url); 
     } 
    }; 

不知道這是不必要的，雖然也許延緩在頁面腳本的負載。

Answer 1

這是可能的body將尚不可用，但head是應該的，所以你可以添加它。

document.head.appendChild(s); 

否則，如果你想等待文件加載，使用DOMContentLoaded事件。

document.addEventListener("DOMContentLoaded", function() { 
    // inject the script 
}); 

Answer 2

onreadystatechange用於引用http請求。 （或僅由舊版本的IE使用）

您可以做到的最好的事情是調用正文標籤關閉時的方法。此時您可以確定文檔確實已加載。

<script> 
    addScript('http://my.url'); 
</script> 

</body> 

但是你可以在回調送花兒給人連接到onload事件的文件。

Answer 3

而不是做document.onreadystatechange我會使用document.onload，在文檔完成加載所有元素後觸發。 onreadystatechange可以在一個會話（我之前使用過）中多次觸發，特別是在ajax加載之後。 onload只有頁面完成加載後纔會觸發，並且不會再次發生。當文檔的readyState屬性發生變化

的readystatechange事件。

---

在文檔加載過程結束時的負載事件觸發。此時，文檔中的所有對象都位於DOM中，並且所有圖像，腳本，鏈接和子幀都已完成加載。

來源：
readystatechange
onload