一般的に使用される 4 つの JavaScript 動的読み込みメソッドのコードの概要

効率を向上させるためにすべての js をロードする必要がない場合があるため、場合によっては適切な js を追加する必要があります。以下は一般的に使用される 4 つのメソッドです

1. 直接 document.write

<script language="javascript"> 
document.write("<script src=&#39;test.js&#39;><\/script>"); 
</script>

。 2. 既存のスクリプトの src 属性を動的に変更します

<script src=&#39;&#39; id="s1"></script> 
<script language="javascript"> 
s1.src="test.js" 
</script>

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

<script> 
var oHead = document.getElementsByTagName(&#39;HEAD&#39;).item(0); 
var oScript= document.createElement("script"); 
oScript.type = "text/javascript"; 
oScript.src="test.js"; 
oHead.appendChild( oScript); 
</script>

これら 3 つのメソッドはすべて非同期で実行されます

4. コンテンツを取得するには、XMLHTTP を使用して取得します。スクリプトの Script オブジェクトを作成します。 注: エラーを避けるために、a.js は UTF8 エンコーディングで保存する必要があります。サーバーと XML はデータの送信に UTF8 エンコーディングを使用するためです。
メインページのコード:

<script language="JavaScript"> 
function GetHttpRequest() 
{ 
if ( window.XMLHttpRequest ) // Gecko 
return new XMLHttpRequest() ; 
else if ( window.ActiveXObject ) // 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 ) 
{ 
IncludeJS( 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 oScript = document.createElement( "script" ); 
oScript.language = "javascript"; 
oScript.type = "text/javascript"; 
oScript.id = sId; 
oScript.defer = true; 
oScript.text = source; 
oHead.appendChild( oScript ); 
} 
} 
AjaxPage( "scrA", "b.js" ); 
alert( "主页面动态加载JS脚本。"); 
alert( "主页面动态加载a.js并取其中的变量：" + str ); 
</script>

これで、JS スクリプトの動的読み込みが完了しました。

りー

以上が一般的に使用される 4 つの JavaScript 動的読み込みメソッドのコードの概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。