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='test.js'><//scrīpt>");
</scrīpt>Nach dem Login kopieren
2. Dynamisch das src-Attribut eines vorhandenen Skripts ändern
<scrīpt src='' id="s1"></scrīpt>
<scrīpt language="javascrīpt">
s1.src="test.js"
</scrīpt>Nach dem Login kopieren
3 scrīpt-Element
<scrīpt>
var oHead = document.
getElementsByTagName
('HEAD').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>Nach dem Login kopieren
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 );
Nach dem Login kopieren
Hauptseitencode:
<scrīpt language="Javascrīpt">
function LoadJS( id, fileUrl )
{
var scrīptTag = document.getElementById( id );
var oHead = document.getElementsByTagName('HEAD').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>Nach dem Login kopieren
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( 'XML request error: ' + oXmlHttp.statusText + ' (' + oXmlHttp.status + ')' ) ;
}
}
}
oXmlHttp.open('GET', url, true);
oXmlHttp.send(null);
}
function IncludeJS(sId, fileUrl, source)
{
if ( ( source != null ) && ( !document.getElementById( sId ) ) ){
var oHead = document.getElementsByTagName('HEAD').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>Nach dem Login kopieren
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")Nach dem Login kopieren
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!
