Zwei Möglichkeiten zum dynamischen Laden von JavaScript-Dateien_Javascript-Tipps

In diesem Artikel werden hauptsächlich zwei Methoden zum dynamischen Laden von JavaScript-Dateien vorgestellt
Die erste besteht darin, den Skriptdateicode mit Ajax vom Hintergrund in den Vordergrund zu laden und den Code dann über eval() für den geladenen Inhalt auszuführen. Die zweite besteht darin, dynamisch 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 cf63513d015db02810a3e91eb1a17796247c7fa73bd5e12a5b13fda6d2e048bd, aber dieses Skript-Tag wird mit js-Animation
erstellt Wenn wir beispielsweise eine callbakc.js dynamisch laden möchten, benötigen wir ein solches Skript-Tag:
Der Code lautet wie folgt:

Code kopieren Der Code lautet wie folgt:

9a51e31c4a84694f80202498de463c9e

Mit dem folgenden Code erstellen Sie dieses Tag über js (und fügen es dem Kopf hinzu):
Der Code lautet 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 wird, müssen wir die darin enthaltenen Methoden aufrufen. Allerdings können wir die js nicht direkt nach header.appendChild(script) aufrufen. Da der Browser diese js asynchron lädt, wissen wir nicht, wann der Ladevorgang abgeschlossen ist. Wir können jedoch feststellen, ob helper.js geladen ist, indem wir Ereignisse abhören. (Angenommen, es gibt eine Rückrufmethode in call.js) Der Code lautet 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 zwei Ereignisüberwachungsfunktionen eingerichtet, da onreadystatechange im IE verwendet wird und Gecko, Webkit-Browser und Opera alle Onload unterstützen. Tatsächlich funktioniert this.readyState == 'complete' nicht sehr gut. Theoretisch sind die Zustandsänderungen wie folgt:
1.nicht initialisiert
2.Laden
3.geladen
4.interaktiv
5. abgeschlossen
Einige Staaten werden jedoch übersprungen. Erfahrungsgemäß kann in IE7 nur einer von „geladen“ und „abgeschlossen“ abgerufen werden, aber nicht beides. Der Grund dafür kann sein, dass die Statusänderung Auswirkungen darauf hat, ob das Lesen aus dem Cache beeinträchtigt wird, oder es kann andere Gründe haben. Am besten ändern Sie die Beurteilungsbedingung in this.readyState == 'loaded' || this.readyState == 'complete'

Bezogen auf die Implementierung von jQuery lautet unsere endgültige Implementierung: Der Code lautet 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 === "loaded" || this.readyState === "complete" ) { 
help(); 
// Handle memory leak in IE 
script.onload = script.onreadystatechange = null; 
} }; 
script.src= 'helper.js'; 
head.appendChild(script);

Eine andere einfache Situation besteht darin, den Aufruf von help() am Ende von helper.js zu schreiben. Dann kann garantiert werden, dass help() automatisch aufgerufen werden kann, nachdem helper.js geladen wurde. Natürlich muss es so sein Letztendlich nicht die richtige App für Sie.

Zusätzliche Dinge zu beachten:

1. Da der src des Skript-Tags auf domänenübergreifende Ressourcen zugreifen kann, kann diese Methode Ajax simulieren und das Problem des domänenübergreifenden Ajax-Zugriffs lösen.
2. Wenn der von Ajax zurückgegebene HTML-Code ein Skript enthält, führt das direkte Einfügen von innerHTML in den Dom nicht dazu, dass das Skript im HTML funktioniert. Nach einem flüchtigen Blick auf den Originalcode von jQuery().html(html) analysiert jQuery zunächst auch die eingehenden Parameter, entfernt den Skriptcode und erstellt dynamisch Skript-Tags. Die jQuery-HTML-Methode wird verwendet, um den HTML-Code hinzuzufügen dom, wenn es ein Skript enthält, ist ausführbar. Zum Beispiel:

Code kopieren Der Code lautet wie folgt:

jQuery("#content").html("3f1c4e4b6b16bbbd69b2ee476dc4f83a alarm(' aa');2cacc6d41bbb37262a98f745aa00fbf0");

Das Obige ist die Methode zum dynamischen Laden von JavaScript-Dateien. Ich hoffe, dass sie für das Lernen aller hilfreich ist.