脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → IE8中动态创建script标签onload无效的解决方法

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

 更新时间：2014年12月22日 09:43:53   投稿：shichen2014  
这篇文章主要介绍了IE8中动态创建script标签onload无效的解决方法,涉及针对javascript加载顺序的调整,具有一定的参考借鉴价值,需要的朋友可以参考下

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

您可能感兴趣的文章:

相关文章

  • Javascript实现单选框效果

    Javascript实现单选框效果

    这篇文章主要为大家详细介绍了Javascript实现单选框效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-12-12
  • 微信外唤起微信小程序的方法详解

    微信外唤起微信小程序的方法详解

    这篇文章主要介绍了微信外唤起微信小程序的方法,结合实例形式详细分析了微信外唤起微信小程序的相关步骤、原理与操作注意事项,需要的朋友可以参考下
    2023-07-07
  • 通过js控制修改css变量的具体示例

    通过js控制修改css变量的具体示例

    在网页开发中我们通常使用CSS来设置网页的样式,但是,在开发过程中,有时候我们需要根据不同的条件来动态修改样式,这篇文章主要介绍了通过js控制修改css变量的具体示例,需要的朋友可以参考下
    2025-04-04
  • 详解webpack 最简打包结果分析

    详解webpack 最简打包结果分析

    这篇文章主要介绍了详解webpack 最简打包结果分析，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-02-02
  • uniapp实现app检查更新与升级详解(uni-upgrade-center)

    uniapp实现app检查更新与升级详解(uni-upgrade-center)

    UniApp是一个跨平台的开发框架,可以同时开发iOS和Android应用,下面这篇文章主要给大家介绍了关于uniapp实现app检查更新与升级(uni-upgrade-center)的相关资料,需要的朋友可以参考下
    2023-11-11
  • 如何在现代JavaScript中编写异步任务

    如何在现代JavaScript中编写异步任务

    这篇文章主要给大家介绍了关于如何在现代JavaScript中编写异步任务的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01
  • JavaScript字符串删除重复字符的方法

    JavaScript字符串删除重复字符的方法

    本文通过代码实例详解js字符串删除重复字符的方法，代码简单易懂，特此分享供大家参考
    2015-12-12
  • js实现简单的秒表

    js实现简单的秒表

    这篇文章主要为大家详细介绍了js实现简单的秒表，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-01-01
  • JavaScript实现快速排序的方法分析

    JavaScript实现快速排序的方法分析

    这篇文章主要介绍了JavaScript实现快速排序的方法,结合实例形式分析了快速排序的原理、实现方法及相关操作注意事项,需要的朋友可以参考下
    2018-01-01
  • ES6的异步终极解决方案分享

    ES6的异步终极解决方案分享

    这篇文章主要给大家介绍了关于ES6的异步终极解决方案，文中通过示例代码介绍的非常详细，对大家学习或者使用ES6具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
    2019-07-07

最新评论