Este artículo describe la solución a la creación no válida de la etiqueta de script en carga dinámica en IE8. Compártelo para su referencia. El análisis específico es el siguiente:
Hoy, cuando estaba trabajando en el proyecto, encontré un problema extraño. La etiqueta de script creada dinámicamente no puede activar el evento Onload en IE8.
El código es el siguiente:
Copie el código de la siguiente manera: var Loadjs = function (src, diversión) {
var script = null;
script = document.createElement ("script");
script.type = "text/javaScript";
script.src = src;
if (typeof divertir === "función") {
script.onload = diversión;
}
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 (typeOf jQuery);
Resultados de ejecución:
Copie el código de la siguiente manera: Undefined // Cuando el test.js se está ejecutando, jQuery aún no se ha cargado
>> typeOf jQuery // ejecutar desde la consola, pero encontró el objeto jQuery, demostrando el problema de la orden de carga
"función"
Además, script.onload no se ejecuta en el código anterior. El código se ha cargado, entonces, ¿por qué todavía no se ejecuta? Después de verificar en línea, descubrí que muchos desarrolladores front-end encontraron este difícil problema, por lo que encontré algunas alternativas, de la siguiente manera:
Copie el código de la siguiente manera: var Loadjs = function (src, diversión) {
var script = null;
script = document.createElement ("script");
script.type = "text/javaScript";
script.src = src;
if (typeof divertir === "función") {
script.onreadystateChange = function () {
var r = script.readyState;
console.log (src + ":" + r);
if (r === 'cargado' || r === 'completo') {
script.onreadyStateChange = null;
divertido();
}
};
}
document.getElementsByTagName ("Head") [0] .AppendChild (script);
};
Resultados de la ejecución:
Copie el código de la siguiente manera: Undefinado
js/jQuery-1.11.0.min.js: carga
Test.js: Complete
De test.js
js/jQuery-1.11.0.min.js: cargado
De jQuery
El paso de ejecución es que se ha encontrado la función similar a la carga, pero hay un problema. No está cargado en orden. Cuando se carga el archivo jQuery, Test.js se ha completado y la primera línea se ejecuta primero. Debido a que Test.js se ejecuta antes de jQuery, se hace indefinido. Entonces podemos reescribirlo así y dejarlo cargar linealmente:
La copia del código es la siguiente: loadjs ("js/jQuery-1.11.0.min.js", function () {
console.log ("de jQuery");
loadjs ("test.js", function () {
console.log ("de test.js");
});
});
Resultados de la ejecución:
Copie el código de la siguiente manera: JS/JQuery-1.11.0.min.js: Carga
js/jQuery-1.11.0.min.js: cargado
De jQuery
función
Test.js: Complete
De test.js
Esta vez, el orden de ejecución está exactamente en el orden que reservamos, pero el código anterior parece incómodo y necesita ser anidada por capa, por lo que descubrí este método de escritura nuevamente:
Copie el código de la siguiente manera: var Loadjs = function (src, diversión) {
var script = null;
script = document.createElement ("script");
script.type = "text/javaScript";
script.src = src;
if (typeof divertir === "función") {
script.onreadystateChange = function () {
var r = script.readyState;
console.log (src + ":" + r);
if (r === 'cargado' || r === 'completo') {
script.onreadyStateChange = null;
divertido();
}
};
}
document.write (script.outerhtml);
//document.getElementsBytagName("head")ficfont>.appendChild(script);
};
loadjs ("js/jQuery-1.11.0.min.js", function () {
console.log ("de jQuery");
});
loadjs ("test.js", function () {
console.log ("de test.js");
});
El orden de los resultados de la ejecución también es diferente:
Copie el código de la siguiente manera: función
js/jQuery-1.11.0.min.js: cargado
De jQuery
test.js: cargado
De test.js
Si cambia el orden de carga
La copia del código es la siguiente: loadjs ("test.js", function () {
console.log ("de test.js");
});
loadjs ("js/jQuery-1.11.0.min.js", function () {
console.log ("de jQuery");
});
Los resultados de la ejecución son diferentes, se cargan de manera similar en secuencia:
Copie el código de la siguiente manera: Undefinado
test.js: cargado
De test.js
js/jQuery-1.11.0.min.js: cargado
De jQuery
Espero que este artículo sea útil para la programación de JavaScript de todos.