Wichtige Antworten zum dynamischen Laden von JS-Skripten, auf den Punkt gebracht

Verwenden Sie Ajax, um eine Website zu entwickeln. Wenn Sie Ajax verwenden, müssen Sie viel JS-Code verwenden, und nicht der gesamte Code wird auf der ersten geladenen Seite verwendet.

Es gibt also viel Dynamik Das Laden von JS-Code ist im Folgenden besser geeignet. In der Ajax-Entwicklung sind die Methoden 2, 3 und 4 nicht geeignet.

ist im Wesentlichen eine Methode zum dynamischen Laden JS ist wie folgt:
1. Direkt Dokument.write

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

2. Dynamisch das src-Attribut eines vorhandenen Skripts ändern

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

3 scrīpt-Element

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

Diese drei Methoden werden alle asynchron ausgeführt, das heißt, während diese Skripte geladen werden, werden die Skripte auf der Hauptseite weiterhin ausgeführt. Wenn die obige Methode verwendet wird, wird der folgende Code nicht ausgeführt erwartete Wirkung erzielt.

JS-Skript, das dynamisch geladen werden soll: a.js, das Folgende ist der Inhalt der Datei.

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

Hauptseitencode:

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

Nachdem der obige Code ausgeführt wurde, wird die Warnung von a.js ausgeführt und eine Meldung wird angezeigt.

Es tritt jedoch ein Fehler auf auf der Hauptseite und es erscheint kein Dialogfeld. Der Grund dafür ist, dass „str“ undefiniert ist. Warum? Weil a.js nicht vollständig erfolgreich geladen wird, wenn die Hauptseite

von str abruft. Wenn Sie ein Skript synchron ausführen müssen, können Sie die vierte Methode unten verwenden.

4. Prinzip: Verwenden Sie XMLHTTP, um den Inhalt des Skripts abzurufen, und erstellen Sie dann ein Skript--Objekt .
Hinweis: a.js muss mit UTF8-Kodierung gespeichert werden, um Fehler zu vermeiden. Weil der Server und XML die UTF8-Codierung zum Übertragen von Daten verwenden.
Hauptseitencode:

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

Verwenden Sie Ajax, um JS-Code synchron zu laden, aber wenn es zwei, drei oder mehr sind, ist das asynchrone Laden schneller.

Ich verwende die dritte Methode: Ich benenne jedes JS. Wenn ein JS geladen wird, wird ein Flag gesetzt, um anzuzeigen, dass es geladen wurde.

//所有的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")

Das Obige ist das dynamische Lade-JS-Skript, das ich für alle zusammengestellt habe. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Durchlaufen der Werte in der EL-Ausdruckslistensammlung in Javascript

So verwenden Sie < ;script> el-Ausdrücke können auch in -Tags verwendet werden

Analyse und Antworten auf wichtige Punkte des Umschreibens und Polymorphismus

Das obige ist der detaillierte Inhalt vonWichtige Antworten zum dynamischen Laden von JS-Skripten, auf den Punkt gebracht. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!