在正文樹內執行腳本時是否準備好了DOM？

我有一個剪輯被放置在ANY網站內部，位於文檔中間的文檔中，而不是在<head>之內。此腳本通過附加<script>標記（與Google Analytics（分析）代碼片段很相似）在我的域中加載外部腳本。在正文樹內執行腳本時是否準備好了DOM？

我的問題是如果該腳本放置在body內部，DOM是否已經被解析，那麼我可以安全地假定我可以在不等待DOMReady事件的情況下對腳本進行評估時操縱DOM？

我在問，因爲在我的腳本開始執行和DOMReady事件觸發時（見棕色欄），這會造成很大的延遲。我使用這個DOMReady implementation

的主機網站

<html> 
 

 
<head> 
 
    ... 
 
</head> 
 

 
<body> 
 
    Website content 
 
    ... 
 
    <div> 
 
    
 
    <!-- Snippet --> 
 
    <div id="myContainer"></div> <!------(I should be able to query this div) --> 
 
    <script type="text/javascript"> 
 
    function() { 
 
     var ga = document.createElement('script'); 
 
     ga.type = 'text/javascript'; 
 
     ga.async = true; 
 
     ga.src = 'http://example.com/script.js'; 
 
     var s = document.getElementsByTagName('script')[0]; 
 
     s.parentNode.insertBefore(ga, s); 
 
    })(); 
 
    </script> 
 
    <!-- Snippet End --> 
 
    
 
    <div> 
 
    More content 
 
    ... 
 
</body> 
 
</html>

的example.com/的script.js

(function(){ 
    //by this time div#myContainer should exist, right? 
    var div = document.getElementById('myContainer'); 
    div.innerHTML = "Hello World!"; 
})();

個

一些注意事項：

我沒有在主機頁面控件，它可以在其內部都有什麼。
支持舊瀏覽器是一個問題。
我應該能夠儘快追加東西，我不能等待其他庫和圖像完成加載。
每次都應該可靠的工作。

來源

2016-11-29 Vitim.us

您的第一個腳本元素之前的所有元素都已存在。 – CBroe

我可以看到的唯一可能的問題是，如果您的腳本在重載媒體資產（如視頻或大圖片）加載之前加載。但如果你不是在媒體數據之後，這不應該成爲一個問題。而且，如果您要定位一個已知的選擇器，您仍然可以將'onload'監聽器附加到這些元素。 – Tyblitz

是的沒錯。如果您在主體底部有一個腳本標記，那麼在您的腳本運行時，所有內容都會在該腳本之前呈現。

W3Schools在這個問題上有一篇不錯的文章。在<head>

腳本

腳本被調用時被執行時，或當一個事件被觸發，被放置在功能。把你的功能放在頭部，這樣他們都在一個地方，他們不會干擾頁面內容。

腳本在<body>

如果你不希望你的腳本放在一個函數裏面，或者如果你的腳本應該寫頁面內容，應置於身體做部分。

來源

2016-11-29 22:05:32 Yaser

在正文樹內執行腳本時是否準備好了DOM？

回答

相關問題