Solution to the invalid onload of dynamically created script tags in IE8_javascript tips

The example in this article describes the solution to the invalid onload of dynamically created script tags in IE8. Share it with everyone for your reference. The specific analysis is as follows:

While working on a project today, I discovered a strange problem. Dynamically created script tags cannot trigger the onload event under IE8.

The code is as follows:

Copy code The code is 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 result:

Copy code The code is as follows:

undefined // When test.js is running, jQuery has not been loaded yet
>> typeof jQuery // Running from the console, the jQuery object was found, proving a loading order problem
"function"

And in the above code, script.onload is not executed. The code has been loaded obviously, so why is onload still not executed? I checked online and found that many front-end developers have encountered this difficult problem, so I found some alternative solutions, as follows:

Copy code The code is 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 result:

Copy code The code is 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 steps are as follows. Now 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 The contents of test.js are executed. Because test.js is executed before jQuery, undefined is printed. So we can rewrite it like this to make it load linearly:

Copy code The code 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 result:

Copy code The code is 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 order of execution was completely in accordance with the order we booked, but the above code looked very awkward and needed to be nested layer by layer, so I discovered this writing method:

Copy code The code is 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 code The code is 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

Copy code The code 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 also different, similar to sequential loading:

Copy code The code is 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 design.