要檢測外部javascripts加載時要檢測的JavaScript

Question

有沒有一種方法（事件監聽器或其他方式）來檢測特定的外部JavaScript何時加載/正在加載/已完成加載？

換句話說，當瀏覽器即將加載，正在加載和/或已經完成加載特定外部腳本時，瀏覽器是否觸發事件？

對於我的目的來說，僅僅檢查是否存在一個已知對象或其他類似的東西是不夠的。相反，我需要一些能夠檢測到JS文件正在加載/加載而不管JS文件的內容。

Answer 1

以下示例在Chrome中運行。它在head標籤的onload事件上附加一個處理程序，然後添加一個外部JavaScript文件。加載文件時，捕獲事件並顯示警報。當腳本完成加載

http://jsfiddle.net/francisfortier/uv9Fh/

window.onload = function() { 
    var head = document.getElementsByTagName("head")[0]; 
    var script = document.createElement("script"); 

    script.setAttribute("type", "text/javascript"); 
    script.setAttribute("src", "http://code.jquery.com/jquery-1.7.1.min.js"); 

    head.addEventListener("load", function(event) { 
     if (event.target.nodeName === "SCRIPT") 
     { 
      alert("Script loaded: " + event.target.getAttribute("src")); 
     } 
    }, true); 

    head.appendChild(script); 
} 

Answer 2

由於所有瀏覽器在處理<script>標籤時都會阻止「UI線程」，因此您可以依靠加載預先存在的標籤。

如果您要動態加載腳本，則可以監聽<script>標記的加載事件。

function loadScript(src, callback) { 
    var script = document.createElement("script"); 
    script.setAttribute("src", src); 
    script.addEventListener("load", callback); 
    document.getElementsByTagName("script")[0].insertBefore(script); 
}; 

loadScript("http://code.jquery.com/jquery-1.7.1.min.js", function(){ 
    alert("loading is done"); 
}); 

Answer 3

如果您可以使用jQuery，請嘗試$.getScript()。文檔here。

Answer 4

<script onload>會火。

您不會可以這樣做：

<script src="/foo.js"></script> 
<script src="/bar.js"></script> 
<script> 
function alertonload(src){ 
    console.log(src+' is loaded'); 
} 
scripts = document.getElementsByTagName('script'); 
for(var i=0; i<scripts.length; i++){ 
    scripts[i].onload = function(){ alertonload(scripts[i].src); }; 
} 
</script> 

這純粹是主觀臆測和炒作;我還沒有嘗試過，有可能有更好的方法來寫它，但這不會做你想要做的。編輯：腳本加載瀏覽器看到他們，而不是事後。它們會在發生之前加載。

Answer 5

我爲那些想要在所有外部文件（動態添加）加載後調用函數的人編寫了一個腳本。它是這樣的：

var file = []; 
 
var loaded = []; 
 
var head = document.getElementsByTagName('head')[0]; 
 

 
var fileOnLoad = 
 
// Pass the arrays to your function 
 
(function(file, loaded){ return function(){ 
 
    
 
    loaded.push(true); 
 
    
 
    // Print the number of files loaded 
 
    document.getElementById("demo").innerHTML += 
 
    "<br>"+loaded.length+" files loaded"; 
 
    
 
    if(file.length == loaded.length){ 
 
    
 
    alert("All files are loaded!"); 
 
    } 
 
}})(file, loaded); 
 

 
//////////////////////////////////////////////// 
 
////          //// 
 
//// Add the external files dynamically //// 
 
////          //// 
 
//////////////////////////////////////////////// 
 

 
file[0] = document.createElement('script'); 
 
file[0].src = 
 
"https://maps.googleapis.com/maps/api/js?v=3.exp"; 
 
file[0].onload = fileOnLoad; 
 
head.appendChild(file[0]); 
 

 
file[1] = document.createElement('script'); 
 
file[1].src = 
 
"http://code.jquery.com/jquery-latest.js"; 
 
file[1].onload = fileOnLoad; 
 
head.appendChild(file[1]); 
 

 
file[2] = document.createElement('script'); 
 
file[2].src = 
 
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"; 
 
file[2].onload = fileOnLoad; 
 
head.appendChild(file[2]); 
 

 
file[3] = document.createElement('link'); 
 
file[3].rel = "stylesheet"; 
 
file[3].href = 
 
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"; 
 
file[3].onload = fileOnLoad; 
 
head.appendChild(file[3]); 
 

 
file[4] = document.createElement('link'); 
 
file[4].rel = "stylesheet"; 
 
file[4].href = 
 
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css"; 
 
file[4].onload = fileOnLoad; 
 
head.appendChild(file[4]);

<div id="demo">0 file loaded</div>

希望它能幫助！