JS 스크립트의 동적 로딩에 대한 핵심 답변

ajax를 사용하여 웹사이트를 개발할 때는 많은 JS 코드를 사용해야 하며, 처음 로드되는 페이지에서 모든 코드가 사용되는 것은 아닙니다.

그래서 많은 JS 코드가 동적으로 로드됩니다. 아래에 소개된 방법은 첫 번째 방법은 적합하지 않습니다. 방법 2, 3, 4는 기본적으로 JS를 동적으로 로드하는 방법입니다.

1.document

.write

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

2. 기존 스크립트의 src 속성을 동적으로 변경

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

3. 동적으로 스크립트 요소 생성

<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>

이 세 가지 메소드는 모두 비동기식으로 실행됩니다. 즉, 이 스크립트를 로드하는 동안 기본 페이지의 스크립트가 계속 실행됩니다. 위의 방법을 사용하면 다음 코드는 예상한 효과를 얻지 못합니다.

동적으로 로드되는 JS 스크립트: a.js, 파일 내용은 다음과 같습니다.

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

메인 페이지 코드:

<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>

위 코드를 실행한 후 a.js의 경고가 실행되고 메시지가 나타납니다.

그러나 메인 페이지에 오류가 발생하고 대화 상자가 나타나지 않습니다. 그 이유는 'str'이 정의되지 않았기 때문입니다. 왜 그렇습니까? 메인 페이지가 str

을 가져올 때 a.js가 완전히 로드되지 않았기 때문입니다. 스크립트를 동기적으로 실행해야 하는 경우 아래 네 번째 방법을 사용할 수 있습니다.

4. 원리: XMLHTTP를 사용하여 스크립트할 콘텐츠를 얻은 다음 스크립트

object

를 만듭니다.

참고: 오류를 방지하려면 a.js를 UTF8 인코딩으로 저장해야 합니다. 서버와 XML은 UTF8 인코딩을 사용하여 데이터를 전송하기 때문입니다. 메인 페이지 코드:

<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 코드를 동기적으로 로드하려면 ajax를 사용하세요. 하나만 로드해도 괜찮지만, 둘, 셋 이상이 있을 경우 비동기적으로 로드하는 것이 더 빠릅니다.

저는 세 번째 방법을 사용합니다. JS가 로드되면 로드되었음을 나타내는 플래그가 설정됩니다.

//所有的JS文件   
var jsM = {   
    page         : false  ,   
    dhtmlXTree  : false ,   
    photo_tree  : false    
   };   
function getJSM(f)   
{   
    var reg = ///(/w+)/./;   
    jF = f.match(reg);   
    return jF[jF.length-1];   
}   
function loadJS(js)   
{   
 id = getJSM(js);   
 var scrīptId = document.getElementById(id);   
 var head = document.getElementsByTagName('head').item(0);   
 if(scrīptId)   
 {   
  //head.removeChild(id);   
 }   
 else  
 {   
  scrīpt  = document.createElement('scrīpt');   
  scrīpt.src = js;   
  scrīpt.type = 'text/javascrīpt';   
  scrīpt.id = id;   
  head.appendChild(scrīpt);   
 }   
}   
//JS时候，判断jsM中，代表其模块的标识是否为true，如果为false，则尚未加载   
loadJS("page.js")   
[js] view plain copy
//所有的JS文件  
var jsM = {  
page         : false  ,  
dhtmlXTree  : false ,  
photo_tree  : false  
};  
function getJSM(f)  
{  
var reg = ///(/w+)/./;  
jF = f.match(reg);  
return jF[jF.length-1];  
}  
function loadJS(js)  
{  
id = getJSM(js);  
var scrīptId = document.getElementById(id);  
var head = document.getElementsByTagName('head').item(0);  
if(scrīptId)  
{  
//head.removeChild(id);  
}  
else  
{  
scrīpt  = document.createElement('scrīpt');  
scrīpt.src = js;  
scrīpt.type = 'text/javascrīpt';  
scrīpt.id = id;  
head.appendChild(scrīpt);  
}  
}  
//JS时候，判断jsM中，代表其模块的标识是否为true，如果为false，则尚未加载  
loadJS("page.js")

위 내용은 제가 모든 사람을 위해 컴파일한 동적 로딩 JS 스크립트입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

JavaScript의 EL 표현식 목록 컬렉션에서 값 탐색

<script></script> 태그에서 el 표현식을 사용하는 방법

다형성의 핵심 포인트에 대한 분석 및 답변 다시 작성

위 내용은 JS 스크립트의 동적 로딩에 대한 핵심 답변의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!