動的にJavaScriptを読み込んでいます - 実行を待っていますか？

DOMにスクリプトタグを追加して複数のjavascript参照を動的にロードしています。動的にJavaScriptを読み込んでいます - 実行を待っていますか？

スクリプトの読み込み動作の説明に感謝します。

私は、DOMにスクリプト要素を追加すると、スクリプトがダウンロードされて実行されると仮定しています。しかし、.onloadイベントが発生したときは？スクリプトの実行が開始されるか、実行が終了するとすぐに？ 2番目の場合、スクリプトの実行/初期化を待つ方法（動的にロードされた参照に依存するスクリプトを追加htmlに追加するコールバックを実行したいと思います）私は以下の機能を使用するスクリプトをロードするために

：

function recursiveInclude(scriptPathArray, callback) { 
    if (scriptPathArray.length > 0) { 
     var scriptPath = scriptPathArray[0]; 

     // check if script is already loaded if not load 
     // this_loadedScriptList is one scope level up variable 
     if (this_loadedScriptList.indexOf(scriptPath) > 0 == false) { 
      var body  = document.getElementsByTagName('body')[0]; 
      var scriptElement  = document.createElement('script'); 
      scriptElement.type = 'text/javascript'; 
      scriptElement.src  = scriptPath; 

      // first script from the array will loaded as soon as body.appendChild function will be called 
      // when script loads 'onload' event will fire next script loading 
      // to this work properly first script from scriptPathArray has to be removed: 
      scriptPathArray.shift(); 


      // if there are any other scripts to load, load them sequentially 
      if (scriptPathArray.length > 0) { 
       // then bind the event to the callback function 
       // there are several events for cross browser compatibility 
       // script.onreadystatechange = callback; 

       scriptElement.onload = recursiveInclude(scriptPathArray, callback);     
      } else { 
       // if no other scripts to load - fire base callback; 
       scriptElement.onload = callback; 
      }  

      // fire the loading 
      body.appendChild(scriptElement); 

      // add script to loaded array. 
      this_loadedScriptList.push(scriptPath); 
     }   
    } 

}

出典

2016-12-12 IT Man

JavaScriptは、ネジやイベント中断もありません。ホールスクリプトは何かが起こる前に実行されます。ブラウザがコントロールを取り戻すまで、イベントはキャプチャされます。したがって、onloadまたは他のイベントは、スクリプトの実行が完了する前または実行された後にのみ起動できます。実際にはonloadがの実行後にになる。

firefoxでまだサポートされているイベントはbeforescriptexecuteですが、HTML5.1の仕様からは削除されています。

あなたはそれを自分で試してみることができます。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> console.log('base script start'); var script=document.createElement('script'); script.onload = function() { console.log('onload fired'); } // MDN says: // This event was a proposal in an early version of the specification. Do not rely on it. // script.addEventListener('beforescriptexecute', function() { console.log('beforescriptexecute fired'); }); script.src = 'external.js'; document.head.appendChild(script); console.log('waiting 3 seconds'); timebase = Date.now(); while((Date.now() - timebase) < 3000) ; console.log("base script end"); </script> </body> </html>

external.js：

console.log('external start... waiting 3 seconds'); timeext = Date.now(); while((Date.now() - timeext) < 3000) ; console.log('external end');

ベーススクリプト3秒を待っ
を開始
ベーススクリプト
beforescriptexecuteを終了するには、
を解雇しました外部スタート... waitinグラム3秒
外部終了
のonloadは、あなたが知っている必要があり、大きな問題がある

MDN - beforescriptexecute

出典

2016-12-12 11:40:07

感謝を..だから.'onload'は、スクリプトの実行後に解雇されなければなりません？私は私のローディング機能をチェックする必要があります - 何か間違っている必要があります... –

を解雇しました。これは、リモートでコードをロードすることを意味します。現代のWebブラウザは、ファイルをロードし、すべてのファイルを非同期でロードしてパフォーマンスを向上させるため、現在のスクリプトを実行し続けます。これは、jQueryメソッドと手動の動的スクリプト読み込みメソッドの両方に適用されます。

これは、これらのトリックを直接使用すると、新しく読み込まれたコードを要求した次の行を使用できなくなることを意味しますそれはまだロードされているので、読み込まれます。

実際には、スクリプトをロードするときにイベントを使用してコールバック関数を実行するだけです。

function loadScript(url, callback) 
{   
    var head = document.getElementsByTagName('head')[0]; 
    var script = document.createElement('script'); 
    script.type = 'text/javascript'; 
    script.src = url; 

    script.onreadystatechange = callback; 
    script.onload = callback; 

    // Fire the loading 
    head.appendChild(script); 
}

次に、このようにコードを記述します。最後に

var myCode = function() { 
    ... 
};

をあなたはそれを実行することができます説明のため

loadScript("the-remote-script.js", myCode);

出典

2016-12-12 11:42:30 Yaser

私はコールバックを使用していますが、それはすべてのスクリプトがダウンロード/実行時に私はコールバックを実行しているようです。私はそれらを（DOM内で）スクリプトタグを見るが、ロードされた参照（chorme）としてリストされていない。 –

興味深いのは、コールバックの実行が遅れている場合です（settimeout - 10ms）。出来た。コントロールがブラウザに戻ってスクリプトを読み込むように見えました - それは可能でしょうか、何か不足していますか？ –

ロードは非同期であるため可能です。たぶん、コールバックは、スクリプトタグが挿入され、リクエストが送信されるとすぐに呼び出されます。レスポンスの代わりに... @ITMan – Yaser

動的にJavaScriptを読み込んでいます - 実行を待っていますか？

答えて

関連する問題