So implementieren Sie das dynamische JS-Einfügen von Skripten und das Einfügen von referenzierten externen Link-Skripten

Dieses Mal zeige ich Ihnen, wie Sie JS-Skripte dynamisch einfügen und referenzierte externe Link-Skripte einfügen Fall. Werfen wir einen Blick darauf.

Was ist ein dynamisch eingefügtes JS-Skript? bezieht sich auf ein Skript, das beim Laden der Seite nicht vorhanden ist, aber geändert werden kann Irgendwann in der Zukunft hat DOM dynamisch hinzugefügt. Identisch mit der Arbeit mit HTML-Elementen.

js Es gibt auch zwei Möglichkeiten, Skripte dynamisch einzufügen: das Einfügen von JavaScript -Code und das Einfügen externer Dateien.

1. Javascript-Code direkt einfügen function sayHi() { alert("hi"); } Logischerweise ist der folgende DOM-Code gültig:

var script = document.createElement("script"); script.type = "text/javascript"; script.appendChild(document.createTextNode("function sayHi() {alert('hi');}")); document.body.appendChild(script); Dieser DOM-Code funktioniert gut in Firefox, Safari, Chrome und Opera. Aber im IE verursacht es einen Fehler. IE behandelt als spezielles Element und erlaubt keinen DOM-Zugriff auf seine untergeordneten Elemente. Sie können jedoch das Textattribut des Elements

verwenden, um JavaScript-Code anzugeben, wie im folgenden Beispiel:

var script = document.creatElement("script"); script.type = "text/javascript"; script.text = "function sayHi() {alert('hi');}"; document.body.appendChild(script); Der geänderte Code kann in IE, Firefox, Opera und Safari3 laufen in .0. Obwohl Versionen vor Safari 3.0 das Textattribut nicht korrekt unterstützen, ermöglichen sie die Verwendung der Textknotentechnologie zur Angabe von Code. Wenn Sie mit früheren Versionen von Safari kompatibel sein müssen, können Sie den folgenden Code verwenden:

2. Referenz einfügen zu externen Dateien Externe JavaScript-Dateien, die dynamisch geladen werden, können sofort ausgeführt werden, wie zum Beispiel das -Element.

Der DOM-Code, der diesen Knoten erstellt, lautet wie folgt:

var script = document.createElement("script"); script.type = "text/javascript"; script.src = "client.js"; document.body.appendChild(script); Offensichtlich spiegelt der DOM hier den entsprechenden HTML-Code originalgetreu wider. Die externe Datei wird jedoch erst heruntergeladen, wenn die letzte Codezeile ausgeführt wird, um das -Element hinzuzufügen. Dieses Element kann auch zum -Element hinzugefügt werden, um den gleichen Effekt zu erzielen.

Aber woher wissen Sie, dass die Skriptdatei geladen ist, da einige unserer Funktionen ausgeführt werden müssen, nachdem das Skript geladen wurde und wirksam wird.

Nachdem ich im Internet nach Ressourcen gesucht habe, habe ich herausgefunden, dass Sie den onreadystatechange des -Elements im IE-Browser verwenden können, um Änderungen im Ladezustand zu überwachen und das Skript zu beurteilen, indem Sie beurteilen, ob es bereit ist geladen oder abgeschlossen ist. Ob der Ladevorgang abgeschlossen ist. Nicht-IE-Browser können mit

onload direkt feststellen, ob das Skript geladen ist. Ein einfacher Implementierungsprozess sieht also so aus:

IE:

var script = document.createElement("script"); var url = 'http:'; script.setAttribute("type","text/javascript"); script.onreadystatechange = function() { if(this.readyState == "loaded" || this.readyState == "complete"){ alert("加载成功啦！"); } } script.setAttribute("src", url); Opera, FF, Chrome usw.:

var script = document.createElement("script"); var url = 'http'; script.setAttribute("type","text/javascript"); script.onload = function() { alert("加载成功啦！"); } script.setAttribute("src",url); Endlich können Sie zusammenführen eine js-Funktion zum dynamischen Einfügen von Skripten;

Empfohlene Lektüre:

So implementieren Sie eine Fuzzy-Abfrage des Vue-Eingabefelds

So kapseln Sie Angular-Netzwerkanforderungen