スクリプトファイルを動的にロードする 2 つの方法_JavaScript のヒント

スクリプトをページに動的にロードするには 2 つの方法があります

1 つ目は、ajax を使用してスクリプト ファイルのコードをバックグラウンドからフォアグラウンドにロードし、ロードされたコンテンツに対して eval() を通じてコードを実行する方法です。 。 2 つ目は、script タグを動的に作成し、その src 属性を設定し、script タグをページの先頭に挿入して js をロードする方法です。これは、 ですが、このスクリプト タグは js を使用して動的に作成されます。たとえば、callbakc.js を動的にロードしたい場合は、次のようなスクリプト タグが必要です:

コードをコピーします コードは次のとおりです: 次のコードは、js を使用してこのタグを作成する方法 (および先頭に追加する方法) です。 コードをコピーします コードは次のとおりです。 var head= document.getElementsByTagName('head')[0]; var script= document.createElement ('スクリプト'); スクリプト .type= 'text/javascript'; head.appendChild(script); >call.jsが読み込まれると呼び出されるメソッドです。ただし、header.appendChild(script) の直後に js を呼び出すことはできません。ブラウザーはこの js を非同期的に読み込むため、いつ読み込みが完了するかわかりません。ただし、イベントをリッスンすることで、helper.js が読み込まれているかどうかを判断できます。 (call.js にコールバック メソッドがあると仮定します)

コードをコピー コードは次のとおりです: var head= document.getElementsByTagName('head')[0]; var script= document.createElement('script'); script.type= 'text/javascript'; .onreadystatechange= function () { if (this.readyState == 'complete') callback(); } script.onload= function(){ callback(); } script.src= 'helper.js'; head.appendChild(script);

ie で onreadystatechange が使用されるため、2 つのイベント リスニング関数を設定します。 、および gecko 、Webkit ブラウザーと Opera は両方とも onload をサポートします。実際、 this.readyState == 'complete' はあまりうまく機能しません。理論的には、状態の変化は次のようになります: 0 未初期化 1 ロード中 2 ロード済み 3 インタラクティブ 4 complete ただし、一部の州はスキップされます。経験上、IE7 では、loaded と completed のどちらか一方のみが取得でき、両方は取得できません。その理由は、状態の変化がキャッシュからの読み取りに影響するか、または他の理由である可能性があります。判定条件を this.readyState == 'loaded' || this.readyState == 'complete'

に変更するのが最善です。 jQuery の実装を参照すると、最終的な実装は次のようになります。 >

コードをコピーします

コードは次のとおりです: var head= document.getElementsByTagName('head')[0] ; var script= document .createElement('script'); script.type= 'text/javascript'; script.onload = script.onreadystatechange = function() { if (! this.readyState || this.readyState === "loaded" || this.readyState === "complete" ) { help(); // IE のメモリ リークを処理します script.onload = script.onreadystatechange = null; } }; script.src= 'helper.js';

put help() 呼び出しが helper.js の最後に記述されている場合、helper.js がロードされた後に help() が自動的に呼び出されることを確認できます。 もちろん、これが適切かどうかも確認できなければなりません。あなたのアプリケーション。

さらに、次の点にも注意してください:

1. script タグの src はドメインを越えてリソースにアクセスできるため、このメソッドは ajax をシミュレートし、ajax のクロスドメイン アクセスの問題を解決できます。 2. ajax から返された HTML コードにスクリプトが含まれている場合、innerHTML を dom に直接挿入しても、HTML 内のスクリプトは機能しません。 jQuery().html(html) の元のコードをざっと確認すると、jQuery は最初に受信パラメータを解析し、スクリプト コードを取り除き、jQuery html メソッドを使用して HTML を追加します。スクリプトが含まれている場合は dom が実行可能になります。例:

コードをコピー

コードは次のとおりです: jQuery("#content" ).html( " alert('aa'); ");

スクリプト ファイルを動的にロードする 2 つの方法_JavaScript のヒント

スクリプトファイルを動的にロードする 2 つの方法_JavaScript のヒント