スクリプトをページに動的にロードするには 2 つの方法があります 1 つ目は、ajax を使用してスクリプト ファイルのコードをバックグラウンドからフォアグラウンドにロードし、ロードされたコンテンツに対して eval() を通じてコードを実行する方法です。 。 2 つ目は、script タグを動的に作成し、その src 属性を設定し、script タグをページの先頭に挿入して js をロードする方法です。これは、< を記述するのと同じです。 /script> ですが、このスクリプト タグは js <br> を使用して動的に作成されます。たとえば、callbakc.js を動的にロードしたい場合は、次のようなスクリプト タグが必要です: <br></p> <div class="codetitle"> <span> <a style="CURSOR: pointer" data="53030" class="copybut" id="copybut53030" onclick="doCopy('code53030')"><u>コードをコピーします</u></a></span> コードは次のとおりです:</div> <div class="codebody" id="code53030"> <br><script type="text/javascript" src="call.js"> ;</script> ; <BR></div> <BR>次のコードは、js を使用してこのタグを作成する方法 (および先頭に追加する方法) です。 <BR><div class="codetitle"><span><a style="CURSOR: pointer" data="44744" class="copybut" id="copybut44744" onclick="doCopy('code44744')"><U>コードをコピーします</U></a></span> コードは次のとおりです。 </div><div class="codebody" id="code44744"> <BR>var head= document.getElementsByTagName('head')[0]; <BR>var script= document.createElement ('スクリプト'); <BR>スクリプト .type= 'text/javascript'; <BR>head.appendChild(script); >call.jsが読み込まれると呼び出されるメソッドです。ただし、header.appendChild(script) の直後に js を呼び出すことはできません。ブラウザーはこの js を非同期的に読み込むため、いつ読み込みが完了するかわかりません。ただし、イベントをリッスンすることで、helper.js が読み込まれているかどうかを判断できます。 (call.js にコールバック メソッドがあると仮定します) <BR><BR></div><BR><BR>コードをコピー <div class="codetitle"><span><a style="CURSOR: pointer" data="22717" class="copybut" id="copybut22717" onclick="doCopy('code22717')"> コードは次のとおりです: <U></U> </a>var head= document.getElementsByTagName('head')[0]; </span>var script= document.createElement('script'); </div>script.type= 'text/javascript'; .onreadystatechange= function () { <div class="codebody" id="code22717">if (this.readyState == 'complete') <BR>callback(); <BR>} <BR>script.onload= function(){ <BR>callback(); <BR>} <BR>script.src= 'helper.js'; <BR>head.appendChild(script); <BR><BR> <BR>ie で onreadystatechange が使用されるため、2 つのイベント リスニング関数を設定します。 、および gecko 、Webkit ブラウザーと Opera は両方とも onload をサポートします。実際、 this.readyState == 'complete' はあまりうまく機能しません。理論的には、状態の変化は次のようになります: <BR>0 未初期化 <BR>1 ロード中 <BR>2 ロード済み </div>3 インタラクティブ <BR>4 complete <BR>ただし、一部の州はスキップされます。経験上、IE7 では、loaded と completed のどちらか一方のみが取得でき、両方は取得できません。その理由は、状態の変化がキャッシュからの読み取りに影響するか、または他の理由である可能性があります。判定条件を this.readyState == 'loaded' || this.readyState == 'complete' <BR><BR> に変更するのが最善です。 jQuery の実装を参照すると、最終的な実装は次のようになります。 ><BR><BR><BR>コードをコピーします<br><br><BR> コードは次のとおりです:<div class="codetitle"><span> <a style="CURSOR: pointer" data="62238" class="copybut" id="copybut62238" onclick="doCopy('code62238')">var head= document.getElementsByTagName('head')[0] ; <U>var script= document .createElement('script'); </U>script.type= 'text/javascript'; </a>script.onload = script.onreadystatechange = function() { </span>if (! this.readyState || this.readyState === "loaded" || this.readyState === "complete" ) { </div>help(); <div class="codebody" id="code62238">// IE のメモリ リークを処理します <BR>script.onload = script.onreadystatechange = null; <BR>} }; <BR>script.src= 'helper.js'; <BR><BR> <BR> put help() 呼び出しが helper.js の最後に記述されている場合、helper.js がロードされた後に help() が自動的に呼び出されることを確認できます。 もちろん、これが適切かどうかも確認できなければなりません。あなたのアプリケーション。 <BR><BR>さらに、次の点にも注意してください: <BR><BR>1. script タグの src はドメインを越えてリソースにアクセスできるため、このメソッドは ajax をシミュレートし、ajax のクロスドメイン アクセスの問題を解決できます。 <BR>2. ajax から返された HTML コードにスクリプトが含まれている場合、innerHTML を dom に直接挿入しても、HTML 内のスクリプトは機能しません。 jQuery().html(html) の元のコードをざっと確認すると、jQuery は最初に受信パラメータを解析し、スクリプト コードを取り除き、jQuery html メソッドを使用して HTML を追加します。スクリプトが含まれている場合は dom が実行可能になります。例: <BR></div><BR><br><br>コードをコピー <br><br><BR> コードは次のとおりです: <BR><div class="codetitle"> <span>jQuery("#content" ).html( "<script>alert('aa');");
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
