Ausführliche Erläuterung von Anwendungsbeispielen zum Laden von Skriptdateien mit Ajax

Verwenden Sie Ajax, um den Skriptdateicode vom Hintergrund in den Vordergrund zu laden, und führen Sie den Code dann über eval() für den geladenen Inhalt aus. Die zweite besteht darin, dynamisch ein Skript-Tag zu erstellen, sein src-Attribut festzulegen 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 dynamisch mit js erstellt
Wenn wir beispielsweise eine callbakc.js dynamisch laden möchten, benötigen wir ein solches Skript-Tag:

<script type="text/javascript" src="call.js"></script>

Mit dem folgenden Code erstellen Sie dieses Tag über js (und fügen es dem Kopf hinzu):

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 enthaltene Methode 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)

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);

Richten Sie zwei Ereignisüberwachungsfunktionen ein, 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:

0 uninitialized 
1 loading 
2 loaded 
3 interactive 
4 complete

Aber einige Zustände werden ü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:

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);

Es gibt auch eine einfache Situation, in der Sie den help()-Aufruf am Ende von helper.js schreiben können. Dann können Sie sicherstellen, dass help() automatisch aufgerufen werden kann, nachdem helper.js geladen wurde Muss das am Ende auch können. Ist das für Ihre Anwendung geeignet?

Beachten Sie außerdem Folgendes:

1 Da der src des Skript-Tags domänenübergreifend auf 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, funktioniert das Skript im HTML nicht, wenn innerHTML direkt in den Dom eingefügt wird. 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:

jQuery("#content").html("<script>alert(&#39;aa&#39;);<\/script>");

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung von Anwendungsbeispielen zum Laden von Skriptdateien mit Ajax. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!