In diesem Artikel wird hauptsächlich zwei Methoden vorgestellt, um JavaScript -Dateien dynamisch zu laden. Interessierte Freunde können sich darauf beziehen.
Die erste besteht darin, die AJAX -Methode zu verwenden, um den Skriptdateicode aus dem Hintergrund in den Vordergrund zu laden und den Code für den geladenen Inhalt über Eval () zu implementieren. Der zweite Typ besteht darin, ein Skript -Tag zu erstellen, sein SRC -Attribut zu konfigurieren und JS zu laden, indem das Skript -Tag in den Kopf der Seite eingefügt wird. Dies entspricht dem Schreiben eines <script src = "..."> </script> im Kopf, dieses Skript -Tag wird jedoch mit JS SRC erstellt.
Wenn wir beispielsweise dynamisch einen Callbakc.js laden möchten, benötigen wir ein Skript -Tag:
Der Code lautet wie folgt: Kopieren Sie den Code wie folgt: <Skript type = "text/javascript" src = "call.js"> </script>
Der folgende Code ist, wie Sie dieses Tag über JS erstellen (und es dem Kopf hinzufügen):
Der Code ist wie folgt:
var head = document.getElementsByTagName ('head') [0]; var script = document.createelement ('script'); script.type = 'text/javaScript'; script.src = 'call.js'; head.Appendchild (script);Wenn Call.js geladen ist, müssen wir die darin enthaltenen Methoden aufrufen. Nach dem Header.AppendChild (Skript) können wir jedoch nicht sofort JS anrufen. Da der Browser diesen JS asynchron lädt, wissen wir nicht, wann es geladen wird. Wir können jedoch beurteilen, ob Helper.js durch Hören von Ereignissen lädt. (Angenommen, es gibt eine Rückrufmethode in call.js) Der Code ist wie folgt:
var head = document.getElementsByTagName ('head') [0]; var script = document.createelement ('script'); script.type = 'text/javaScript'; script.onReadyStatechange = function () {if (this.readyState == 'complete') callback (); } script.onload = function () {callback (); } script.src = 'helper.js'; head.Appendchild (script);Ich habe 2 Event -Hörfunktionen eingerichtet, da OnReadyStatechange im IE verwendet wird, während Onload von Gecko, Webkit -Browser und Operator unterstützt wird. Tatsächlich funktioniert dies. Theoretisch sind die Zustandsänderungen wie folgt:
1. Uninitialisiert
2. Laden
3. Laden
4.Interaktiv
5.Complete
Aber einige Staaten werden übersprungen. Laut Erfahrung in IE7 können Sie nur einen von geladenem und abgeschlossenem und nicht beide erscheinen. Der Grund kann sein, dass Sie feststellen, ob das Lesen aus Cache die Änderung des Zustands oder aus anderen Gründen beeinflusst. Es ist am besten, die Beurteilungsbedingung auf dies zu ändern. this.readystate == 'vollständig' '
Unter Bezugnahme auf die Implementierung von JQuery haben wir sie schließlich wie folgt implementiert: Der Code ist wie folgt:
var head = document.getElementsByTagName ('head') [0]; var script = document.createelement ('script'); script.type = 'text/javaScript'; script.onload = script.onReadyStatechange = function () {if (! this.ReadyState || this.readyState === "Laden" || this.readystate == "complete") {help (); // Speicherleck in IE script.onload = script.onReadyStatechange = null; }}; script.src = 'helper.js'; head.Appendchild (script);Es gibt eine weitere einfache Situation, die Sie am Ende von Helper.js den Anruf anhilfe () schreiben können, sodass Sie sicherstellen können, dass Hilfe () nach dem Laden von Helper.js automatisch aufgerufen werden kann. Am Ende ist dies natürlich nicht für Ihre Bewerbung geeignet.
Hinweis:
1. Da das Skript-Tag SRC über Domänen hinweg auf Ressourcen zugreifen kann, kann diese Methode AJAX simulieren und das Problem des Ajax-Cross-Domain-Zugriffs lösen.
2. Wenn der mit AJAX zurückgegebene HTML -Code das Skript enthält, kann das Skript in HTML direkt in das DOM mit innerHTML einfügen, das das Skript in HTML nicht funktionieren kann. Ich habe mir den ursprünglichen Code von Jquery () HTML (HTML) grob angesehen. JQuery analysiert zuerst die übergebenen Parameter, streift den Skriptcode darin und erstellt Skript -Tags dynamisch. Die von JQuery verwendete HTML -Methode wird dem DOM -HTML hinzugefügt, wenn sie Skript enthält, kann ausgeführt werden. wie:
Die Codekopie lautet wie folgt: jQuery ("#content"). Html ("<Script> alert ('aa');
Das obige ist die Methode zum dynamischen Laden von JavaScript -Dateien. Ich hoffe, es wird für das Lernen aller hilfreich sein.