動的に追加されたスクリプトが解析/ロード/実行されたことを知る方法？

Question

JavaScriptファイルを動的にロードしようとしていますが、ロードされたらファイル内の関数を実行します。私のメインのHTMLでは、私は基本的に持っている：私は、インターネット上で見つけることができるものから、

function load_javascript(js_file) 
{ 
    function load_js_callback(example) 
    { 
     console.log("function " + function_in_js_file + " is " + typeof(function_name)); 
     if (typeof(function_in_js_file) == "undefined") 
     { 
      window.setTimeout(load_js_callback(example), 500); 
      return false; 
     } 
     function_in_js_file(example); 
    } 

    var jstag = document.createElement("script"); 
    document.head.appendChild(jstag); 

    // Browsers: 
    jstag.onload=load_js_callback("example"); 
    // Internet Explorer: 
    jstag.onreadystatechange = function() { 
     if (this.readyState == 'complete') { 
      load_js_callback("example"); 
     } 
    } 
    jstag.setAttribute('src',js_file); 
} 

load_javascript("/js/example.js"); 

（https://stackoverflow.com/a/3248500とhttps://stackoverflow.com/a/16231055）これは動作するはずですが、jstag.onload実行function_in_js_fileが定義されているので、私がチェックするwindow.setTimeoutを必要とされる前に、関数が定義されるまで再度呼び出します。

理想的には、私はそのタイムアウトを取り除きたいと思います。ファイルのロード/解析/実行が完了したことを知る方法はありますか（私には正しい用語がわからない）、関数が動的ファイルを変更することなく理想的に定義されていますか？私はまたdocument.head.appendChild(jstag);をjstag.setAttributeの後に入れてみましたが、同じ結果が出ました。

Answer 1

理由を使用することを検討して、これは

function loadScript(sScriptSrc, oCallback) { 
    var oHead = document.getElementsByTagName('head')[0]; 
    var oScript = document.createElement('script'); 
    oScript.type = 'text/javascript'; 
    oScript.src = sScriptSrc; 
    // most browsers 
    oScript.onload = oCallback; 
    // IE 6 & 7 
    oScript.onreadystatechange = function() { 
     if (this.readyState == 'complete') { 
      oCallback(); 
     } 
    } 
    oHead.appendChild(oScript); 
} 

、その後は、コールバックを経由してその中にあなたのスクリプトファイルと関数を呼び出すと呼ばれる関数を定義してみてくださいスクリプトがロードされる前に実行されているため、

var jstag = document.createElement("script"); 
document.head.appendChild(jstag); 

// Browsers: 
jstag.onload=load_js_callback("example"); 

load_js_callbackの戻り値をjstag.onloadに割り当てています。 onloadハンドラ関数を望んでいる：

var jstag = document.createElement("script"); 
document.head.appendChild(jstag); 

// Browsers: 
jstag.onload=function() { load_js_callback("example"); }; 

他のコメントで指摘したように、このすべてが保証すると、ブラウザがスクリプトをダウンロードしたということです。

Answer 2

loadScript("/js/example.js", function() { 
       //call function 
function_in_js_file(example); 
      }); 

Answer 3

DOMContentLoaded jsのイベントに

document.addEventListener('DOMContentLoader', function() { 
    load_javascript("/js/example.js"); // Or what else you want to do 
    // HERE I'm confident that my webpage is loaded and my js files too. 
})