Este artigo descreve a solução para a criação inválida da tag script onLload dinamicamente no IE8. Compartilhe para sua referência. A análise específica é a seguinte:
Hoje, quando eu estava trabalhando no projeto, encontrei um problema estranho. A tag de script criada dinamicamente não pode acionar o evento OnLoad no IE8.
O código é o seguinte:
Copie o código da seguinte forma: var loadjs = function (src, diversão) {
var script = nulo;
script = document.createElement ("script");
script.type = "text/javascript";
script.src = src;
if (typeof diversão === "function") {
script.onload = diversão;
}
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 em execução:
Copie o código da seguinte
>> TIPO DE JQUERY // RUN do console, mas encontrou o objeto jQuery, provando o problema da ordem de carregamento
"função"
Além disso, o script.onload não é executado no código acima. O código foi carregado, então por que ainda não é executado ONLOAD? Depois de verificar on-line, descobri que muitos desenvolvedores de front-end encontraram esse problema difícil, então encontrei algumas alternativas, como segue:
Copie o código da seguinte forma: var loadjs = function (src, diversão) {
var script = nulo;
script = document.createElement ("script");
script.type = "text/javascript";
script.src = src;
if (typeof diversão === "function") {
script.onReadyStateChange = function () {
var r = script.readyState;
console.log (src + ":" + r);
if (r === 'carregado' || r === 'completo') {
script.onReadyStateChange = null;
diversão();
}
};
}
document.getElementsByTagName ("Head") [0] .AppendChild (Script);
};
Resultados da execução:
Copie o código da seguinte forma: indefinido
js/jQuery-1.11.0.min.js: Carregando
test.js: completo
De test.js
js/jQuery-1.11.0.min.js: carregado
De jQuery
A etapa de execução é que a função semelhante ao Onload foi encontrada, mas há um problema. Não é carregado em ordem. Quando o arquivo jQuery está carregando, o test.js foi concluído e a primeira linha é executada primeiro. Como o test.js é executado antes do jQuery, é feito indefinido. Para que possamos reescrever assim e deixar carregar linearmente:
A cópia do código é a seguinte: loadjs ("js/jQuery-1.11.0.min.js", function () {
console.log ("de jQuery");
loadjs ("test.js", function () {
console.log ("de test.js");
});
});
Resultados da execução:
Copie o código da seguinte
js/jQuery-1.11.0.min.js: carregado
De jQuery
função
test.js: completo
De test.js
Desta vez, a ordem de execução está exatamente na ordem que reservamos, mas o código acima parece estranho e precisa ser aninhado camada por camada, então descobri este método de escrita novamente:
Copie o código da seguinte forma: var loadjs = function (src, diversão) {
var script = nulo;
script = document.createElement ("script");
script.type = "text/javascript";
script.src = src;
if (typeof diversão === "function") {
script.onReadyStateChange = function () {
var r = script.readyState;
console.log (src + ":" + r);
if (r === 'carregado' || r === 'completo') {
script.onReadyStateChange = null;
diversão();
}
};
}
document.write (script.outerhtml);
//document.getElementsByTagName("head").
};
loadjs ("js/jQuery-1.11.0.min.js", function () {
console.log ("de jQuery");
});
loadjs ("test.js", function () {
console.log ("de test.js");
});
A ordem dos resultados da execução também é diferente:
Copie o código da seguinte forma: função
js/jQuery-1.11.0.min.js: carregado
De jQuery
test.js: carregado
De test.js
Se você alterar a ordem de carregamento
A cópia do código é a seguinte: loadjs ("test.js", function () {
console.log ("de test.js");
});
loadjs ("js/jQuery-1.11.0.min.js", function () {
console.log ("de jQuery");
});
Os resultados da execução são diferentes, carregados de maneira semelhante na sequência:
Copie o código da seguinte forma: indefinido
test.js: carregado
De test.js
js/jQuery-1.11.0.min.js: carregado
De jQuery
Espero que este artigo seja útil para a programação JavaScript de todos.