IE8中动态创建script标签onload无效的解决方法
本文实例讲述了IE8中动态创建script标签onload无效的解决方法。分享给大家供大家参考。具体分析如下：
今天做项目，发现一个奇怪的问题，动态创建的script标签在IE8下无法触发onload事件。
代码如下：
varloadJs=function(src,fun){
varscript=null;
script=document.createElement("script");
script.type="text/javascript";
script.src=src;
if(typeoffun==="function"){
script.onload=fun;
}
document.getElementsByTagName("head")[0].appendChild(script);
};
loadJs("js/jquery-1.11.0.min.js",function(){
console.log("FromjQuery");
});
loadJs("test.js",function(){
console.log("Fromtest.js");
});
test.js：
console.log(typeofjQuery);运行结果：
undefined //test.js运行时，jQuery还未加载 >>typeofjQuery //从控制台上运行，却找到了jQuery对象，证明加载顺序问题 "function"
并且以上代码中script.onload并没有执行，明明代码已经加载进来了，为什么还是onload不执行呢？到网上一查发现众多前端开发人员都遇到这个棘手的问题，于是找到了一些替补方案，如下：
varloadJs=function(src,fun){
varscript=null;
script=document.createElement("script");
script.type="text/javascript";
script.src=src;
if(typeoffun==="function"){
script.onreadystatechange=function(){
varr=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 Fromtest.js js/jquery-1.11.0.min.js:loaded FromjQuery
执行步骤为，这下类似于onload的功能算然算是找到了，但却有一个问题，它不是按顺序加载的，当jQuery文件loading的时候，test.js已经complete了，并且第一行就先执行了test.js的内容。因为test.js先于jQuery执行，所以才打出undefined。于是我们可以改写成这样，让它线性加载：
loadJs("js/jquery-1.11.0.min.js",function(){
console.log("FromjQuery");
loadJs("test.js",function(){
console.log("Fromtest.js");
});
});执行结果：
js/jquery-1.11.0.min.js:loading js/jquery-1.11.0.min.js:loaded FromjQuery function test.js:complete Fromtest.js
这次，执行的顺序完全是按照我们预订的顺序来了，但以上代码看着很别扭，需要层层嵌套，于是又发现了这种写法：
varloadJs=function(src,fun){
varscript=null;
script=document.createElement("script");
script.type="text/javascript";
script.src=src;
if(typeoffun==="function"){
script.onreadystatechange=function(){
varr=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("FromjQuery");
});
loadJs("test.js",function(){
console.log("Fromtest.js");
});执行结果的顺序，也不相同：
function js/jquery-1.11.0.min.js:loaded FromjQuery test.js:loaded Fromtest.js
如果你改变一下加载顺序
loadJs("test.js",function(){
console.log("Fromtest.js");
});
loadJs("js/jquery-1.11.0.min.js",function(){
console.log("FromjQuery");
});执行结果也就不一样，类似顺序加载：
undefined test.js:loaded Fromtest.js js/jquery-1.11.0.min.js:loaded FromjQuery
希望本文所述对大家的javascript程序设计有所帮助。