Dieser Artikel beschreibt die Lösung für die ungültige Erstellung von Skript -Tag -Onload dynamisch in IE8. Teilen Sie es für Ihre Referenz. Die spezifische Analyse ist wie folgt:
Heute, als ich an dem Projekt arbeitete, fand ich ein seltsames Problem. Das dynamisch erstellte Skript -Tag kann das Onload -Ereignis unter IE8 nicht auslösen.
Der Code ist wie folgt:
Kopieren Sie den Code wie folgt: var loadjs = Funktion (SRC, Fun) {
var script = null;
script = document.createelement ("script");
script.type = "text/javaScript";
script.src = src;
if (typeof fun === "Funktion") {
script.onload = fun;
}
document.getElementsByTagName ("head") [0] .AppendChild (Skript);
};
loadJS ("js/jquery-1.11.0.min.js", function () {
console.log ("from jQuery");
});
loadJS ("test.js", function () {
console.log ("from test.js");
});
test.js:
console.log (typeof jQuery);
Auslaufergebnisse:
Kopieren Sie den Code wie folgt: undefiniert // Wenn der Test.js ausgeführt wird, wurde JQuery noch nicht geladen
>> Typof jQuery // Aus der Konsole laufen, fand jedoch das JQuery -Objekt und beweist das Problem der Ladeauftrag
"Funktion"
Darüber hinaus wird script.onload im obigen Code nicht ausgeführt. Der Code wurde geladen. Warum wird er also noch nicht ausgeführt? Nachdem ich online nachgesehen hatte, stellte ich fest, dass viele Front-End-Entwickler auf dieses schwierige Problem stießen, und fand einige Alternativen wie folgt:
Kopieren Sie den Code wie folgt: var loadjs = Funktion (SRC, Fun) {
var script = null;
script = document.createelement ("script");
script.type = "text/javaScript";
script.src = src;
if (typeof fun === "Funktion") {
script.onReadyStatechange = function () {
var r = script.ReadyState;
console.log (src + ":" + r);
if (r === 'geladen' || r === 'komplett') {
script.onReadyStatechange = null;
Spaß();
}
};
}
document.getElementsByTagName ("head") [0] .AppendChild (Skript);
};
Ausführungsergebnisse:
Kopieren Sie den Code wie folgt: undefiniert
JS/JQuery-1.11.0.min.js: Laden
test.js: vollständig
Von test.js
JS/JQuery-1.11.0.min.js: geladen
Von jQuery
Der Ausführungsschritt ist, dass die ähnliche Funktion dem Onload gefunden wurde, aber es gibt ein Problem. Es ist nicht in Ordnung geladen. Wenn die JQuery -Datei geladen wird, wurde test.js abgeschlossen und die erste Zeile wird zuerst ausgeführt. Da test.js vor jQuery ausgeführt wird, wird undefined gemacht. So können wir es so umschreiben und es linear laden lassen:
Die Codekopie lautet wie folgt: LoadJS ("js/jquery-1.11.0.min.js", function () {
console.log ("from jQuery");
loadJS ("test.js", function () {
console.log ("from test.js");
});
});
Ausführungsergebnisse:
Kopieren Sie den Code wie folgt: JS/JQuery-1.11.0.min.js: Laden
JS/JQuery-1.11.0.min.js: geladen
Von jQuery
Funktion
test.js: vollständig
Von test.js
Diesmal ist die Ausführungsreihenfolge genau in der von uns gebuchten Reihenfolge, aber der obige Code sieht unangenehm aus und muss Schicht für Schicht verschachtelt werden. Daher habe ich diese Schreibmethode erneut entdeckt:
Kopieren Sie den Code wie folgt: var loadjs = Funktion (SRC, Fun) {
var script = null;
script = document.createelement ("script");
script.type = "text/javaScript";
script.src = src;
if (typeof fun === "Funktion") {
script.onReadyStatechange = function () {
var r = script.ReadyState;
console.log (src + ":" + r);
if (r === 'geladen' || r === 'komplett') {
script.onReadyStatechange = null;
Spaß();
}
};
}
document.write (script.outerhtml);
//document.getElementsByTagName("head")... AppendChild(script);
};
loadJS ("js/jquery-1.11.0.min.js", function () {
console.log ("from jQuery");
});
loadJS ("test.js", function () {
console.log ("from test.js");
});
Die Reihenfolge der Ausführungsergebnisse ist ebenfalls unterschiedlich:
Kopieren Sie den Code wie folgt: Funktion
JS/JQuery-1.11.0.min.js: geladen
Von jQuery
test.js: geladen
Von test.js
Wenn Sie die Ladereihenfolge ändern
Die Codekopie lautet wie folgt: LoadJS ("test.js", function () {
console.log ("from test.js");
});
loadJS ("js/jquery-1.11.0.min.js", function () {
console.log ("from jQuery");
});
Die Ausführungsergebnisse sind unterschiedlich, ähnlich geladen in Folge:
Kopieren Sie den Code wie folgt: undefiniert
test.js: geladen
Von test.js
JS/JQuery-1.11.0.min.js: geladen
Von jQuery
Ich hoffe, dieser Artikel wird für JavaScript -Programme aller hilfreich sein.