Solution au chargement non valide des balises de script créées dynamiquement dans les astuces IE8_javascript

L'exemple de cet article décrit la solution au chargement non valide de balises de script créées dynamiquement dans IE8. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

En travaillant sur un projet aujourd'hui, j'ai découvert un problème étrange. Les balises de script créées dynamiquement ne peuvent pas déclencher l'événement onload sous IE8.

Le code est le suivant :

Copier le code Le code est le suivant :

var loadJs = function(src, fun){
var script = nul;
​ script = document.createElement("script");
​ script.type = "texte/javascript";
Script.src = src;
Si(typeof fun === "function"){
          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", function(){
Console.log("De test.js");
});
test.js：
console.log(type de jQuery);

Résultat en cours d'exécution :

Copier le code Le code est le suivant :

undefined // Lorsque test.js est en cours d'exécution, jQuery n'a pas été chargé encore

>> typeof jQuery // Exécuté depuis la console, l'objet jQuery a été trouvé, prouvant un problème d'ordre de chargement
"fonction"

Et dans le code ci-dessus, script.onload n'est pas exécuté. Le code a évidemment été chargé, alors pourquoi onload n'est-il toujours pas exécuté ? J'ai vérifié en ligne et constaté que de nombreux développeurs front-end ont rencontré ce problème difficile, j'ai donc trouvé des solutions alternatives, comme suit :

Copier le code Le code est le suivant :

var loadJs = function(src, fun){

var script = nul;
​ script = document.createElement("script");
​ script.type = "texte/javascript";
Script.src = src;
Si(typeof fun === "function"){
           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ésultat de l'exécution :

Copier le code Le code est le suivant :non défini

js/jquery-1.11.0.min.js : chargement

test.js : terminé
De test.js
js/jquery-1.11.0.min.js : chargé
De jQuery

Les étapes d'exécution sont les suivantes. Maintenant, la fonction similaire à onload a été trouvée, mais il y a un problème. Lorsque le fichier jQuery est chargé, test.js est terminé et la première ligne est The. le contenu de test.js est exécuté. Parce que test.js est exécuté avant jQuery, undefined est imprimé. On peut donc le réécrire comme ceci pour qu'il se charge de manière linéaire :

Copier le code Le code est le suivant :

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

console.log("De jQuery");

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

Résultat de l'exécution :

Copier le code Le code est le suivant :

js/jquery-1.11.0.min.js : chargement

js/jquery-1.11.0.min.js : chargé
De jQuery
fonction
test.js : terminé
De test.js

Cette fois, l'ordre d'exécution était tout à fait conforme à l'ordre que nous avions réservé, mais le code ci-dessus semblait très gênant et devait être imbriqué couche par couche, j'ai donc découvert cette méthode d'écriture :

Copier le code Le code est le suivant :

var loadJs = function(src, fun){

var script = nul;
​ script = document.createElement("script");
​ script.type = "texte/javascript";
Script.src = src;
Si(typeof fun === "function"){
           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", function(){
Console.log("De test.js");
});

L'ordre des résultats d'exécution est également différent :

Copier le code Le code est le suivant :fonction

js/jquery-1.11.0.min.js : chargé

De jQuery
test.js : chargé
De test.js

Si vous modifiez l'ordre de chargement

Copier le code Le code est le suivant :loadJs("test.js", function(){

Console.log("De test.js");

});

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

Les résultats d'exécution sont également différents, similaires au chargement séquentiel :

Copier le code Le code est le suivant :non défini

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 conception de la programmation JavaScript de chacun.