本文实例讲述了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程序设计有所帮助。