IE8动态加载JS时onload失效的解决方案

IE8动态加载JS时onload失效的解决方案

本文分享一种在IE8浏览器中解决动态创建script标签时onload事件失效的方法，供读者参考。

在项目开发过程中，遇到一个异常现象：在IE8环境下，通过代码动态生成的script标签无法触发onload事件。

具体实现代码如下：

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

运行结果：

undefined // test.js运行时，jQuery还未加载
>> typeof jQuery // 从控制台上运行，却找到了jQuery对象，证明加载顺序问题
"function"

此外，上述代码中的script.onload回调并未执行。尽管脚本文件已加载完成，但onload事件依然未被触发。查阅资料发现，许多前端开发者都面临这一棘手问题，以下是几种替代方案：

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

执行结果：

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

虽然上述方法实现了类似onload的功能，但存在加载顺序错乱的问题。例如，当jQuery文件处于loading状态时，test.js可能已经complete，导致test.js的内容先于jQuery执行，从而输出undefined。为解决此问题，可改用回调嵌套的方式实现线性加载：

loadJs("js/jquery-1.11.0.min.js", function(){
  
console.log("From jQuery");
  
loadJs("test.js", function(){
console.log("From test.js");
    });        
});

执行结果：

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

此次执行顺序符合预期，但代码嵌套过深，可读性较差。因此，还可以尝试另一种写法：

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

执行结果的顺序有所不同：

function
js/jquery-1.11.0.min.js: loaded
From jQuery
test.js: loaded
From test.js

若调整加载顺序：

loadJs("test.js", function(){
console.log("From test.js");
}); 
  
loadJs("js/jquery-1.11.0.min.js", function(){
console.log("From jQuery");
});

执行结果也会有所不同，表现为类似顺序加载的效果：

undefined
test.js: loaded
From test.js
js/jquery-1.11.0.min.js: loaded
From jQuery

希望本文所述的JavaScript程序设计技巧能对大家有所帮助。