Lösung für das ungültige Onload von dynamisch erstellten Skript-Tags in IE8_javascript-Tipps

Das Beispiel in diesem Artikel beschreibt die Lösung für das ungültige Onload von dynamisch erstellten Skript-Tags in IE8. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

Bei der Arbeit an einem Projekt habe ich heute ein seltsames Problem entdeckt. Dynamisch erstellte Skript-Tags können das Onload-Ereignis unter IE8 nicht auslösen.

Der Code lautet wie folgt:

Code kopieren Der Code lautet wie folgt:

var loadJs = function(src, fun){
var script = null;
​ script = document.createElement("script"); ​ script.type = "text/javascript"; Script.src = src;
If(typeof fun === "function"){
          script.onload = fun;
}

Document.getElementsByTagName("head")[0].appendChild(script);
};

loadJs("js/jquery-1.11.0.min.js", function(){
console.log("Von jQuery");
});

loadJs("test.js", function(){
Console.log("Von test.js");
});
test.js:
console.log(typeof jQuery);

Laufergebnis:

Code kopieren Der Code lautet wie folgt: undefiniert // Wenn test.js ausgeführt wird, wurde jQuery nicht geladen noch

>> typeof jQuery // Beim Ausführen über die Konsole wurde das jQuery-Objekt gefunden, was ein Problem mit der Ladereihenfolge beweist

„Funktion“

Und im obigen Code wird „script.onload“ offensichtlich nicht ausgeführt. Der Code wurde also geladen. Warum wird „onload“ immer noch nicht ausgeführt? Ich habe online nachgeschaut und festgestellt, dass viele Front-End-Entwickler auf dieses schwierige Problem gestoßen sind. Daher habe ich einige alternative Lösungen gefunden:

Code kopieren Der Code lautet wie folgt:var loadJs = function(src, fun){

var script = null;

​ script = document.createElement("script"); ​ script.type = "text/javascript"; Script.src = src;
If(typeof fun === "function"){
           script.onreadystatechange = function() {
            var r = script.readyState; console.log(src ": " r); If (r === 'geladen' || r === 'vollständig') {
                   script.onreadystatechange = null;                   fun(
               }
          };
}

Document.getElementsByTagName("head")[0].appendChild(script);
};

Ausführungsergebnis:




Code kopieren

Der Code lautet wie folgt:

undefiniert js/jquery-1.11.0.min.js: wird geladen test.js: abgeschlossen Von test.js js/jquery-1.11.0.min.js: geladen Von jQuery

Die Ausführungsschritte sind wie folgt: Es wurde ein Problem gefunden, das dem Laden von jQuery ähnelt. Wenn die jQuery-Datei geladen wird, ist die erste Zeile abgeschlossen Inhalte von test.js werden ausgeführt. Da test.js vor jQuery ausgeführt wird, wird undefiniert ausgegeben. Wir können es also so umschreiben, dass es linear geladen wird:




Code kopieren

Der Code lautet wie folgt:

loadJs("js/jquery-1.11.0.min.js", function(){

console.log("Von jQuery");

LoadJs("test.js", function(){
console.log("Von test.js"); });  
});

Ausführungsergebnis:

Code kopieren Der Code lautet wie folgt:

js/jquery-1.11.0.min.js: wird geladen

js/jquery-1.11.0.min.js: geladen
Von jQuery
Funktion
test.js: abgeschlossen
Von test.js

Diesmal entsprach die Ausführungsreihenfolge vollständig der von uns gebuchten Reihenfolge, aber der obige Code sah sehr umständlich aus und musste Schicht für Schicht verschachtelt werden, sodass ich diese Schreibmethode entdeckte:

Code kopieren Der Code lautet wie folgt:

var loadJs = function(src, fun){

var script = null;
​ script = document.createElement("script"); ​ script.type = "text/javascript"; Script.src = src;
If(typeof fun === "function"){
           script.onreadystatechange = function() {
            var r = script.readyState; console.log(src ": " r); If (r === 'geladen' || r === 'vollständig') {
                   script.onreadystatechange = null;                   fun(
               }
          };
}

Document.write(script.outerHTML);
//document.getElementsByTagName("head")[0].appendChild(script);
};

loadJs("js/jquery-1.11.0.min.js", function(){
console.log("Von jQuery");
});

loadJs("test.js", function(){
Console.log("Von test.js");
});

Auch die Reihenfolge der Ausführungsergebnisse ist unterschiedlich:




Code kopieren

Der Code lautet wie folgt:

Funktion js/jquery-1.11.0.min.js: geladen Von jQuery test.js: geladen Von test.js

Wenn Sie die Ladereihenfolge ändern

Code kopieren

Der Code lautet wie folgt:

loadJs("test.js", function(){ Console.log("Von test.js"); }); loadJs("js/jquery-1.11.0.min.js", function(){ console.log("Von jQuery");

});

Auch die Ausführungsergebnisse sind unterschiedlich, ähnlich wie beim sequentiellen Laden:




Code kopieren

Der Code lautet wie folgt:

undefiniert test.js: geladen Von test.js js/jquery-1.11.0.min.js: geladen Von jQuery

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.