JS 스크립트의 동적 로딩에 대한 핵심 답변-JS 튜토리얼-php.cn

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

亚连

풀어 주다： 2018-05-17 11:00:58

원래의

1682명이 탐색했습니다.

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(&#39;head&#39;).item(0);   
 if(scrīptId)   
 {   
  //head.removeChild(id);   
 }   
 else  
 {   
  scrīpt  = document.createElement(&#39;scrīpt&#39;);   
  scrīpt.src = js;   
  scrīpt.type = &#39;text/javascrīpt&#39;;   
  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(&#39;head&#39;).item(0);  
if(scrīptId)  
{  
//head.removeChild(id);  
}  
else  
{  
scrīpt  = document.createElement(&#39;scrīpt&#39;);  
scrīpt.src = js;  
scrīpt.type = &#39;text/javascrīpt&#39;;  
scrīpt.id = id;  
head.appendChild(scrīpt);  
}  
}  
//JS时候，判断jsM中，代表其模块的标识是否为true，如果为false，则尚未加载  
loadJS("page.js")

로그인 후 복사

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