JS スクリプトの動的読み込みに対する重要な答え (要点まで)

Ajaxを使用してWebサイトを開発する場合、多くのJSコードを使用する必要があり、最初に読み込まれるページですべてのコードが使用されるわけではありません。そのため、多くのJSコードが動的に読み込まれます。 Ajax 開発では、最初の方法は適切ではありません。JS を動的にロードする詳細な方法は次のとおりです。 2. 既存のスクリプトの src 属性を動的に変更します

<scrīpt language="javascrīpt"> 
    document.write("<scrīpt src=&#39;test.js&#39;><//scrīpt>"); 
</scrīpt>

3. スクリプト要素を動的に作成します

<scrīpt src=&#39;&#39; id="s1"></scrīpt> 
<scrīpt language="javascrīpt"> 
    s1.src="test.js" 
</scrīpt>

これら 3 つのメソッドはすべて非同期で実行されます。つまり、これらのスクリプトをロードしている間、メイン ページのスクリプトは実行され続けます。上記の方法を使用した場合、次のコードは期待した効果を発揮しません。動的にロードされる
JSスクリプト: a.js、以下はファイルの内容です。

<scrīpt> 
    var oHead = document.
getElementsByTagName
(&#39;HEAD&#39;).item(0); 
    var oscrīpt= document.createElement("scrīpt"); 
    oscrīpt.type = "text/javascrīpt"; 
    oscrīpt.src="test.js"; 
    oHead.appendChild( oscrīpt); 
</scrīpt>

メインページのコード:

var str = "中国"; 
alert( "这是a.js中的变量：" + str );

上記のコードを実行すると、a.jsのアラートが実行され、メッセージが表示されます

しかし、メインページではエラーが発生し、ダイアログボックスは表示されません。理由は、「str」が未定義であるためです。メインページが str

を取得しているときに、a.js が完全に正常にロードされていないためです。スクリプトを同期的に実行する必要がある場合は、以下の 4 番目の方法を使用できます。

4. 原則: XMLHTTP を使用してスクリプト化するコンテンツを取得し、スクリプト

オブジェクト

を作成します。

注: エラーを避けるために、a.js は UTF8 エンコーディングで保存する必要があります。サーバーと XML はデータの送信に UTF8 エンコーディングを使用するためです。
メインページのコード:

<scrīpt language="Javascrīpt"> 
function LoadJS( id, fileUrl ) 
{ 
    var scrīptTag = document.getElementById( id ); 
    var oHead = document.getElementsByTagName(&#39;HEAD&#39;).item(0); 
    var oscrīpt= document.createElement("scrīpt"); 
    if ( scrīptTag  ) oHead.removeChild( scrīptTag  ); 
    oscrīpt.id = id; 
    oscrīpt.type = "text/javascrīpt"; 
    oscrīpt.src=fileUrl ; 
    oHead.appendChild( oscrīpt); 
} 
LoadJS( "a.js" ); 
alert( "主页面动态加载a.js并取其中的变量：" + str ); 
</scrīpt>

JSコードを同期的に読み込むにはajaxを使用します。1つだけでも構いませんが、2つ、3つ以上ある場合は非同期で読み込んだ方が高速です。

私は 3 番目の方法を使用します。JS がロードされると、ロードされたことを示すフラグが設定されます。

<scrīpt language="Javascrīpt"> 
function GetHttpRequest() 
{ 
    if ( window.XMLHttpRequest ) // Gecko 
        
return
 new XMLHttpRequest() ; 
    else if ( window.ActiveX
Object
 ) // IE 
        return new ActiveXObject("MsXml2.XmlHttp") ; 
} 
function AjaxPage(sId, url){ 
    var oXmlHttp = GetHttpRequest() ; 
    oXmlHttp.OnReadyStateChange = function()  
    { 
        if ( oXmlHttp.readyState == 4 ) 
        {
            if ( oXmlHttp.status == 200 || oXmlHttp.status == 304 ) 
            {
                
Include
JS( sId, url, oXmlHttp.responseText );
            } 
            else 
            { 
                alert( &#39;XML request error: &#39; + oXmlHttp.statusText + &#39; (&#39; + oXmlHttp.status + &#39;)&#39; ) ; 
            } 
        } 
    } 
    oXmlHttp.open(&#39;GET&#39;, url, true); 
    oXmlHttp.send(null); 
} 
function IncludeJS(sId, fileUrl, source) 
{ 
    if ( ( source != null ) && ( !document.getElementById( sId ) ) ){ 
        var oHead = document.getElementsByTagName(&#39;HEAD&#39;).item(0); 
        var oscrīpt = document.createElement( "scrīpt" ); 
        oscrīpt.language = "javascrīpt"; 
        oscrīpt.type = "text/javascrīpt"; 
        oscrīpt.id = sId; 
        oscrīpt.defer = true; 
        oscrīpt.text = source; 
        oHead.appendChild( oscrīpt ); 
    } 
} 
AjaxPage( "scrA", "b.js" ); 
alert( "主页面动态加载JS脚本。"); 
alert( "主页面动态加载a.js并取其中的变量：" + str ); 
</scrīpt>

上記は私が皆さんのためにコンパイルした動的読み込み JS スクリプトです。将来皆さんのお役に立てれば幸いです。
関連記事:

JavaScript での EL 式リスト コレクションの値のトラバース

<script></script> タグで EL 式を使用する方法

書き換え分析とポリモーフィズムの重要なポイントへの答え

以上がJS スクリプトの動的読み込みに対する重要な答え (要点まで)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。