外部のJavaScriptがロードされているときを検出するための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()を試してください。 Docs 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>

はそれが役に立てば幸い！