Dieses Beispiel fasst die Methoden zum dynamischen Laden von JS zusammen. Teilen Sie es für Ihre Referenz. Die Details sind wie folgt:
Methode 1: Direct Document.Write (asynchron)
Kopieren Sie den Code wie folgt: <script Language = "JavaScript">
document.write ("<script src = 'res/extwidget/echarts/xx.js'> <// script>");
</script>
Da diese Methode asynchrones Laden ist, schreibt document.write die Schnittstelle um, was offensichtlich nicht praktisch ist
Methode 2: Ändern Sie dynamisch das SRC -Attribut des vorhandenen Skripts (asynchron)
Kopieren Sie den Code wie folgt: <script src = '' id = "xx"> </script>
<script Language = "JavaScript">
xx.src = "test.js"
</script>
Diese Methode ändert nicht die Schnittstellenelemente, schweigt die Schnittstellenelemente nicht um, sondern wird auch asynchron geladen
Methode 3: Skriptelemente dynamisch erstellen (asynchron)
Kopieren Sie den Code wie folgt: <Script>
var body = document.getElementsByTagName ('body'). [0];
var script = document.createelement ("script");
script.type = "text/javaScript";
script.src = "xx.js";
Body.AppendChild (Oscript);
</script>
Im Vergleich zur zweiten Methode besteht der Vorteil dieser Methode darin, dass das Schreiben eines Skript -Tags auf der Schnittstelle zu Beginn nicht erforderlich ist. Der Nachteil ist eine asynchrone Belastung
Methode 4: XMLHTTPREQUEST/ActiveXObject Lade (asynchron)
Kopieren Sie den Code wie folgt:/**
* Asynchrones Laden von JS -Skripten
* @Param -ID Die ID des <skript> -Tags, die festgelegt werden muss
* @param URL Relative oder absoluter Pfad zur JS -Datei
*/
LoadJS: Funktion (ID, URL) {
var xmlhttp = null;
if (window.activeXObject) {// dh
versuchen {
// kann in IE6 und späteren Versionen verwendet werden
xmlhttp = new ActiveXObject ("msxml2.xmlhttp");
} catch (e) {
//Ie5.5 und spätere Versionen können verwendet werden
xmlhttp = new ActiveXObject ("microsoft.xmlhttp");
}
} else if (window.xmlhttprequest) {
// Firefox, Opera 8.0+, Safari, Chrome
xmlhttp = new xmlhttprequest ();
}
// Synchrone Laden verwenden
xmlhttp.open ("get", url, false);
// Synchronisierungsanforderung senden,
// Wenn der Browser Chrome oder Opera ist, muss er veröffentlicht werden, bevor er ausgeführt werden kann. Andernfalls wird ein Fehler gemeldet
xmlhttp.send (null);
xmlhttp.onReadyStatechange = function () {
// 4 bedeutet, dass die Daten gesendet wurden
if (xmlhttp.readystate == 4) {
// 0 ist der aufgerufene Gebiet, 200 bis 300, bedeutet, dass der Zugriff auf den Server erfolgreich ist.
// 304 bedeutet, dass der Zugriff Cache ohne Änderung ist
if ((xmlhttp.status> = 200 && xmlhttp.status <300) || xmlhttp.status == 0 || xmlhttp.status == 304) {
var mybody = document.getElementsByTagName ("Körper") [0];
var myscript = document.createelement ("script");
myScript.Language = "JavaScript";
myscript.type = "text/javaScript";
myScript.id = id;
versuchen{
// IE8 und die folgende Unterstützung unterstützen diese Methode nicht und müssen über das Textattribut eingestellt werden
myScript.AppendChild (document.CreateTextNode (xmlhttp.responsetext));
} catch (ex) {
myscript.text = xmlhttp.responsetext;
}
mybody.Appendchild (MyScript);
}
}
}
// Verwendete asynchrone Beladung
xmlhttp.open ("get", url, true);
xmlhttp.send (null);
}
Einstellung auf false in geöffnet bedeutet synchrone Laden. Synchrones Laden erfordert kein Einstellen von OnReadyStatEchange -Ereignissen
Diese vier Methoden werden asynchron ausgeführt, dh beim Laden dieser Skripte wird das Skript auf der Hauptseite weiter ausgeführt.
Methode 5: xmlhttprequest/activexObject lade (synchron)
Kopieren Sie den Code wie folgt:/**
* Synchrones Laden von JS -Skripten
* @Param -ID Die ID des <skript> -Tags, die festgelegt werden muss
* @param URL Relative oder absoluter Pfad zur JS -Datei
* @return {boolean} Gibt zurück, ob es erfolgreich geladen wird, wahrer Erfolg, Falsch bedeutet Misserfolg
*/
LoadJS: Funktion (ID, URL) {
var xmlhttp = null;
if (window.activeXObject) {// dh
versuchen {
// kann in IE6 und späteren Versionen verwendet werden
xmlhttp = new ActiveXObject ("msxml2.xmlhttp");
} catch (e) {
//Ie5.5 und spätere Versionen können verwendet werden
xmlhttp = new ActiveXObject ("microsoft.xmlhttp");
}
} else if (window.xmlhttprequest) {
// Firefox, Opera 8.0+, Safari, Chrome
xmlhttp = new xmlhttprequest ();
}
// Synchrone Laden verwenden
xmlhttp.open ("get", url, false);
// Senden Sie eine Synchronisationsanforderung. Wenn der Browser Chrome oder Opera ist, muss er veröffentlicht werden, bevor er ausgeführt werden kann. Andernfalls wird ein Fehler gemeldet
xmlhttp.send (null);
// 4 bedeutet, dass die Daten gesendet wurden
if (xmlhttp.readystate == 4) {
// 0 ist die aufgerufene Gegend. 200 bis 300 bedeutet, dass der Zugriff auf den Server erfolgreich ist, und 304 bedeutet, dass der zugegriffene Cache nicht erstellt wird.
if ((xmlhttp.status> = 200 && xmlhttp.status <300) || xmlhttp.status == 0 || xmlhttp.status == 304) {
var mybody = document.getElementsByTagName ("Körper") [0];
var myscript = document.createelement ("script");
myScript.Language = "JavaScript";
myscript.type = "text/javaScript";
myScript.id = id;
versuchen{
// IE8 und die folgende Unterstützung unterstützen diese Methode nicht und müssen über das Textattribut eingestellt werden
myScript.AppendChild (document.CreateTextNode (xmlhttp.responsetext));
} catch (ex) {
myscript.text = xmlhttp.responsetext;
}
mybody.Appendchild (MyScript);
zurückkehren;
}anders{
false zurückgeben;
}
}anders{
false zurückgeben;
}
}
Ich hoffe, dieser Artikel wird für JavaScript -Programme aller hilfreich sein.