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

この記事では主に JavaScript ファイルを動的に読み込む 2 つの方法を紹介します。興味のある方は参考にしてください。
1 つ目は、ajax を使用してスクリプト ファイルのコードをバックグラウンドからフォアグラウンドにロードし、ロードされたコンテンツに対して eval() を通じてコードを実行する方法です。 2 つ目は、script タグを動的に作成し、その src 属性を設定し、ページの先頭に script タグを挿入して js をロードすることです。これは、

次のコードは、js を使用してこのタグを作成する (そして、先頭に追加する) 方法を示しています。
コードは次のとおりです:

var head= document.getElementsByTagName('head')[0]; 
var script= document.createElement('script'); 
script.type= 'text/javascript'; 
script.src= 'call.js'; 
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'; 
script.onreadystatechange= function () { 
if (this.readyState == 'complete') 
callback(); 
} 
script.onload= function(){ 
callback(); 
} 
script.src= 'helper.js'; 
head.appendChild(script);

IE では onreadystatechange が使用されており、gecko、webkit ブラウザ、opera はすべて onload をサポートしているため、イベント リスニング関数を 2 つ設定しました。実際、 this.readyState == 'complete' は理論的にはあまりうまく機能しません。状態の変化は次のとおりです。 1.未初期化
2.ロード
3.ロード済み
4.インタラクティブ
5.完了
ただし、一部の州はスキップされます。経験上、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(); 
// Handle memory leak in IE 
script.onload = script.onreadystatechange = null; 
} }; 
script.src= 'helper.js'; 
head.appendChild(script);

もう 1 つの簡単な状況は、helper.js の最後に help() 呼び出しを記述することです。これにより、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("<script> alert(' aa');</script>");

以上はJavaScriptファイルを動的に読み込む方法ですので、皆様の学習のお役に立てれば幸いです。