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


Posted in Javascript onDecember 22, 2014

本文实例讲述了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 相关文章推荐
再谈IE中Flash控件的自动激活 ObjectWrap
Mar 09 Javascript
JavaScript Prototype对象
Jan 07 Javascript
浏览器脚本兼容 文本框中,回车键触发事件的兼容
Jun 21 Javascript
JavaScript中的16进制字符(改进)
Nov 21 Javascript
jquery表格内容筛选实现思路及代码
Apr 16 Javascript
ComboBox 和 DateField 在IE下消失的解决方法
Aug 30 Javascript
js对象基础实例分析
Jan 13 Javascript
jQuery实现表格行上移下移和置顶的方法
May 22 Javascript
微信小程序 loading(加载中提示框)实例
Oct 28 Javascript
关于vue v-for循环解决img标签的src动态绑定问题
Sep 18 Javascript
js实现简单进度条效果
Mar 25 Javascript
Nest.js散列与加密实例详解
Feb 24 Javascript
javascript的日期对象、数组对象、二维数组使用说明
Dec 22 #Javascript
javascript中的遍历for in 以及with的用法
Dec 22 #Javascript
Jquery实现图片预加载与延时加载的方法
Dec 22 #Javascript
javascript定义变量时加var与不加var的区别
Dec 22 #Javascript
javascript操作字符串的原生方法
Dec 22 #Javascript
JavaScript动态创建link标签到head里的方法
Dec 22 #Javascript
javascript中Date对象的getDay方法使用指南
Dec 22 #Javascript
You might like
PHP静态类
2006/11/25 PHP
用 PHP5 轻松解析 XML
2006/12/04 PHP
php修改时间格式的代码
2011/05/29 PHP
php 解决旧系统 查出所有数据分页的类
2012/08/27 PHP
php session 写入数据库
2016/02/13 PHP
PHP一个简单的无需刷新爬虫
2019/01/05 PHP
PHP Pipeline 实现中间件的示例代码
2020/04/26 PHP
jquery选择器(常用选择器说明)
2010/09/28 Javascript
jquery ajax 局部刷新小案例
2014/02/08 Javascript
JavaScript实现的图像模糊算法代码分享
2014/04/22 Javascript
基于jQuery实现简单的折叠菜单效果
2015/11/23 Javascript
详解js跨域原理以及2种解决方案
2015/12/09 Javascript
JS模拟bootstrap下拉菜单效果实例
2016/06/17 Javascript
C#微信小程序服务端获取用户解密信息实例代码
2017/03/10 Javascript
bootstrap如何让dropdown menu按钮式下拉框长度一致
2017/04/10 Javascript
详解用node-images 打造简易图片服务器
2017/05/08 Javascript
基于JavaScript实现无缝滚动效果
2017/07/21 Javascript
ES6 Array常用扩展的应用实例分析
2019/06/26 Javascript
JavaScript实现简单进度条效果
2020/03/25 Javascript
[03:40]2014DOTA2国际邀请赛 B神专访:躲箭真的很难
2014/07/13 DOTA
[01:07:46]完美世界DOTA2联赛循环赛 Magma vs IO BO2第二场 11.01
2020/11/02 DOTA
[01:00:10]完美世界DOTA2联赛PWL S2 FTD vs Inki 第二场 11.21
2020/11/24 DOTA
[01:11]steam端dota2实名认证操作流程视频
2021/03/11 DOTA
深入浅析python with语句简介
2018/04/11 Python
python2使用bs4爬取腾讯社招过程解析
2019/08/14 Python
简单了解Python变量作用域正确使用方法
2020/06/12 Python
pycharm配置安装autopep8自动规范代码的实现
2021/03/02 Python
CSS3实现淘宝留白的方法
2020/06/05 HTML / CSS
 Alo Yoga官网:购买瑜伽服装
2018/06/17 全球购物
下面关于"联合"的题目的输出是什么
2013/08/06 面试题
学校司机岗位职责
2013/11/14 职场文书
2014学习优秀共产党员先进事迹材料思想汇报
2014/09/14 职场文书
留学推荐信怎么写
2015/03/26 职场文书
感恩教师主题班会
2015/08/12 职场文书
创业计划书之健康营养产业
2019/10/15 职场文书
Python中的 Set 与 dict
2022/03/13 Python