An invalid solution for dynamically creating the script tag onload in IE8

  • 2020-05-09 18:06:02
  • OfStack

This article illustrates an example of an invalid solution for dynamically creating the script tag onload in IE8. Share with you for your reference. The specific analysis is as follows:

During the project today, I found a strange problem that the script tag created dynamically could not trigger the onload event under IE8.

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);

Operation results:
undefined  // test.js Runtime, jQuery Has not been loaded  
>> typeof jQuery  // It's running from the console, and it's there jQuery Object to prove the loading order problem
"function"

Moreover, script.onload is not executed in the above code. Why is onload not executed when the code is already loaded in? Check to the Internet 1 found that many front-end developers have encountered this thorny problem, so I found a number of alternative solutions, 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:
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 function similar to onload is found, but there is a problem that it is not loaded in order. When jQuery file loading is loaded, test.js is already complete, and the content of test.js is executed in the first line. Because test.js is executed before jQuery, undefined is printed. So we can rewrite it like this, and let it load linearly:
loadJs("js/jquery-1.11.0.min.js", function(){ 
 
    console.log("From jQuery"); 
 
    loadJs("test.js", function(){
        console.log("From test.js");         
    });       
});

Execution results:
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 is exactly the order we ordered, but the above code looks awkward and needs to be nested in layers, so we found this way again:
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:
function 
js/jquery-1.11.0.min.js: loaded 
From jQuery 
test.js: loaded 
From test.js

If you change the loading order by 1
loadJs("test.js", function(){ 
    console.log("From test.js");         
});
 
loadJs("js/jquery-1.11.0.min.js", function(){
    console.log("From jQuery"); 
});

The execution result is not the same, similar to the sequential loading:
undefined  
test.js: loaded 
From test.js 
js/jquery-1.11.0.min.js: loaded 
From jQuery

I hope this article is helpful for you to design javascript program.


Related articles: