IE8中动态创建script标签onload无效的解决方法

  • Z时代
  • 2024-01-10
  • 分类：综合

本文实例讲述了IE8中动态创建script标签onload无效的解决方法。分享给大家供大家参考。具体分析如下：

今天做项目，发现一个奇怪的问题，动态创建的script标签在IE8下无法触发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的内容。因为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程序设计有所帮助。

以上是 IE8中动态创建script标签onload无效的解决方法 的全部内容， 来源链接： utcz.com/z/321096.html

回到顶部