Cet article décrit la solution à la création non valide de la balise de script onload dynamiquement dans IE8. Partagez-le pour votre référence. L'analyse spécifique est la suivante:
Aujourd'hui, quand je travaillais sur le projet, j'ai trouvé un problème étrange. La balise de script créée dynamiquement ne peut pas déclencher l'événement Onload sous IE8.
Le code est le suivant:
Copiez le code comme suit: var chargejs = fonction (src, fun) {
var script = null;
script = document.CreateElement ("script");
script.type = "text / javascript";
script.src = src;
if (typeof fun === "fonction") {
script.onload = fun;
}
document.getElementsByTagName ("Head") [0] .APPEndChild (script);
};
loadjs ("js / jquery-1.11.0.min.js", function () {
console.log ("de jQuery");
});
loadjs ("test.js", fonction () {
console.log ("From test.js");
});
test.js:
console.log (typeof jQuery);
Résultats en cours:
Copiez le code comme suit: Undefined // Lorsque le test.js est en cours d'exécution, jQuery n'a pas encore été chargé
>> type de jQuery // exécuté à partir de la console, mais a trouvé l'objet jQuery, prouvant le problème de l'ordre de chargement
"fonction"
De plus, Script.onload n'est pas exécuté dans le code ci-dessus. Le code a été chargé, alors pourquoi n'est-il pas toujours exécuté Onload? Après avoir vérifié en ligne, j'ai constaté que de nombreux développeurs frontaux ont rencontré ce problème difficile, j'ai donc trouvé des alternatives, comme suit:
Copiez le code comme suit: var chargejs = fonction (src, fun) {
var script = null;
script = document.CreateElement ("script");
script.type = "text / javascript";
script.src = src;
if (typeof fun === "fonction") {
script.onreadystatechange = function () {
var r = script.readystate;
console.log (src + ":" + r);
if (r === 'chargé' || r === 'complet') {
script.onreadystateChange = null;
amusant();
}
};
}
document.getElementsByTagName ("Head") [0] .APPEndChild (script);
};
Résultats de l'exécution:
Copiez le code comme suit: Undefined
JS / JQuery-1.11.0.min.js: Chargement
test.js: complet
De test.js
js / jquery-1.11.0.min.js: chargé
De jQuery
L'étape d'exécution est que la fonction similaire à onload a été trouvée, mais il y a un problème. Il n'est pas chargé dans l'ordre. Lorsque le fichier jQuery se charge, Test.js a été terminé et la première ligne est exécutée en premier. Étant donné que Test.js est exécuté avant jQuery, un non-défini est fabriqué. Nous pouvons donc le réécrire comme ça et le laisser charger linéairement:
La copie de code est la suivante: loadjs ("js / jQuery-1.11.0.min.js", function () {
console.log ("de jQuery");
loadjs ("test.js", fonction () {
console.log ("From test.js");
});
});
Résultats de l'exécution:
Copiez le code comme suit: JS / JQuery-1.11.0.min.js: Chargement
js / jquery-1.11.0.min.js: chargé
De jQuery
fonction
test.js: complet
De test.js
Cette fois, l'ordre d'exécution est exactement dans l'ordre que nous avons réservé, mais le code ci-dessus semble maladroit et doit être imbriqué par couche, j'ai donc découvert cette méthode d'écriture:
Copiez le code comme suit: var chargejs = fonction (src, fun) {
var script = null;
script = document.CreateElement ("script");
script.type = "text / javascript";
script.src = src;
if (typeof fun === "fonction") {
script.onreadystatechange = function () {
var r = script.readystate;
console.log (src + ":" + r);
if (r === 'chargé' || r === 'complet') {
script.onreadystateChange = null;
amusant();
}
};
}
document.write (script.outerhtml);
//Document.getElementsByTagname("head")) 0.APPENDCHILD(Script);
};
loadjs ("js / jquery-1.11.0.min.js", function () {
console.log ("de jQuery");
});
loadjs ("test.js", fonction () {
console.log ("From test.js");
});
Les résultats de l'ordre d'exécution sont également différents:
Copiez le code comme suit: Fonction
js / jquery-1.11.0.min.js: chargé
De jQuery
test.js: chargé
De test.js
Si vous modifiez l'ordre de chargement
La copie de code est la suivante: Loadjs ("test.js", fonction () {
console.log ("From test.js");
});
loadjs ("js / jquery-1.11.0.min.js", function () {
console.log ("de jQuery");
});
Les résultats de l'exécution sont différents, chargés de la même séquence:
Copiez le code comme suit: Undefined
test.js: chargé
De test.js
js / jquery-1.11.0.min.js: chargé
De jQuery
J'espère que cet article sera utile à la programmation JavaScript de tous.