일반적으로 사용되는 4가지 JavaScript 동적 로딩 방법의 코드 요약

때로는 효율성을 높이기 위해 모든 js를 로드할 필요가 없기 때문에 적절한 js를 동적으로 추가해야 합니다. 다음은 일반적으로 사용되는 4가지 방법입니다

1. Direct 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>

이 세 가지 메소드는 모두 비동기식으로 실행됩니다

4. 원칙: XMLHTTP를 사용하여 가져옵니다. 스크립트의 경우 스크립트 개체를 만듭니다.
참고: 오류를 방지하려면 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!