首页 > 语言 > JavaScript > 正文

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

2024-05-06 14:48:49
字体:
来源:转载
供稿:网友

本文实例讲述了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 

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

图片精选