SoFunction
Updated on 2025-03-09

Solution to invalid dynamic creation of script tag onload in IE8

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 codeThe code is as follows:
var loadJs = function(src, fun){
    var script = null;
    script = ("script");
    = "text/javascript";
    = src;
    if(typeof fun === "function"){
        = fun;
    }
 
    ("head")[0].appendChild(script);
};
 
loadJs("js/jquery-1.11.", function(){
    ("From jQuery");         
});
 
loadJs("", function(){
    ("From ");         
});
：
(typeof jQuery);

Running results:
Copy the codeThe code is as follows:
undefined  // When 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, the above code has not been executed. 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 codeThe code is as follows:
var loadJs = function(src, fun){
    var script = null;
    script = ("script");
    = "text/javascript";
    = src;
    if(typeof fun === "function"){
        = function() {
            var r = ;
            (src + ": " + r);
            if (r === 'loaded' || r === 'complete') {
                = null;
                fun();
            }
        };
    }
 
    ("head")[0].appendChild(script);
};

Execution results:
Copy the codeThe code is as follows:
undefined 
js/jquery-1.11.: loading 
: complete 
From  
js/jquery-1.11.: 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 loaded, it has been completed, and the contents are executed first on the first line. Because it was executed before jQuery, undefined was typed. So we can rewrite it like this and let it load linearly:
Copy the codeThe code is as follows:
loadJs("js/jquery-1.11.", function(){
 
    ("From jQuery"); 
 
    loadJs("", function(){
        ("From ");         
    });       
});

Execution results:
Copy the codeThe code is as follows:
js/jquery-1.11.: loading 
js/jquery-1.11.: loaded 
From jQuery 
function
: complete 
From

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 codeThe code is as follows:
var loadJs = function(src, fun){
    var script = null;
    script = ("script");
    = "text/javascript";
    = src;
    if(typeof fun === "function"){
        = function() {
            var r = ;
            (src + ": " + r);
            if (r === 'loaded' || r === 'complete') {
                = null;
                fun();
            }
        };
    }
 
    ();
    //("head")[0].appendChild(script);
 
};
 
loadJs("js/jquery-1.11.", function(){
    ("From jQuery"); 
});
 
loadJs("", function(){
    ("From ");         
});

The order of execution results is also different:
Copy the codeThe code is as follows:
function
js/jquery-1.11.: loaded 
From jQuery 
: loaded 
From

If you change the loading order
Copy the codeThe code is as follows:
loadJs("", function(){
    ("From ");         
});
 
loadJs("js/jquery-1.11.", function(){
    ("From jQuery"); 
});

The execution results are different, similarly loaded in sequence:
Copy the codeThe code is as follows:
undefined 
: loaded 
From  
js/jquery-1.11.: loaded 
From jQuery

I hope this article will be helpful to everyone's JavaScript programming.