This article describes the solution to the invalid creation of script tag onload dynamically in IE8. Share it for your reference. The specific analysis is as follows:
Today, when I was working on the project, I found a strange problem. The dynamically created script tag cannot trigger the onload event under IE8.
The code is as follows:
Copy the code as follows: var loadJs = function(src, fun){
var script = null;
script = document.createElement("script");
script.type = "text/javascript";
script.src = src;
if(typeof fun === "function"){
script.onload = fun;
}
document.getElementsByTagName("head")[0].appendChild(script);
};
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);
Running results:
Copy the code as follows: undefined // When the test.js is running, jQuery has not been loaded yet
>> typeof jQuery // Run from the console, but found the jQuery object, proving the loading order problem
"function"
Moreover, script.onload is not executed in the above code. The code has been loaded, so why is it still not executed onload? After checking online, I found that many front-end developers encountered this difficult problem, so I found some alternatives, as follows:
Copy the code as follows: var loadJs = function(src, fun){
var script = null;
script = document.createElement("script");
script.type = "text/javascript";
script.src = src;
if(typeof fun === "function"){
script.onreadystatechange = function() {
var r = script.readyState;
console.log(src + ": " + r);
if (r === 'loaded' || r === 'complete') {
script.onreadystatechange = null;
fun();
}
};
}
document.getElementsByTagName("head")[0].appendChild(script);
};
Execution results:
Copy the code as follows: undefined
js/jquery-1.11.0.min.js: loading
test.js: complete
From test.js
js/jquery-1.11.0.min.js: loaded
From jQuery
The execution step is, the function similar to onload has been found, but there is a problem. It is not loaded in order. When the jQuery file is loading, test.js has been completed, and the first line is executed first. Because test.js is executed before jQuery, undefined is made. So we can rewrite it like this and let it load linearly:
The code copy is as follows: loadJs("js/jquery-1.11.0.min.js", function(){
console.log("From jQuery");
loadJs("test.js", function(){
console.log("From test.js");
});
});
Execution results:
Copy the code as follows: js/jquery-1.11.0.min.js: loading
js/jquery-1.11.0.min.js: loaded
From jQuery
function
test.js: complete
From test.js
This time, the execution order is exactly in the order we booked, but the above code looks awkward and needs to be nested layer by layer, so I discovered this writing method again:
Copy the code as follows: var loadJs = function(src, fun){
var script = null;
script = document.createElement("script");
script.type = "text/javascript";
script.src = src;
if(typeof fun === "function"){
script.onreadystatechange = function() {
var r = script.readyState;
console.log(src + ": " + r);
if (r === 'loaded' || r === 'complete') {
script.onreadystatechange = null;
fun();
}
};
}
document.write(script.outerHTML);
//document.getElementsByTagName("head")[0].appendChild(script);
};
loadJs("js/jquery-1.11.0.min.js", function(){
console.log("From jQuery");
});
loadJs("test.js", function(){
console.log("From test.js");
});
The order of execution results is also different:
Copy the code as follows: function
js/jquery-1.11.0.min.js: loaded
From jQuery
test.js: loaded
From test.js
If you change the loading order
The code copy is as follows: loadJs("test.js", function(){
console.log("From test.js");
});
loadJs("js/jquery-1.11.0.min.js", function(){
console.log("From jQuery");
});
The execution results are different, similarly loaded in sequence:
Copy the code as follows: undefined
test.js: loaded
From test.js
js/jquery-1.11.0.min.js: loaded
From jQuery
I hope this article will be helpful to everyone's JavaScript programming.