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 相关文章推荐
jQuery 动画基础教程
Dec 25 Javascript
如何让div span等元素能响应键盘事件操作指南
Nov 13 Javascript
JQuery切换显示的效果实例代码
Feb 27 Javascript
基于jquery实现等比缩放图片
Dec 03 Javascript
黑帽seo劫持程序,js劫持搜索引擎代码
Sep 15 Javascript
prototype与__proto__区别详细介绍
Jan 09 Javascript
JavaScript用二分法查找数据的实例代码
Jun 17 Javascript
vue中eventbus被多次触发以及踩过的坑
Dec 02 Javascript
了解JavaScript函数中的默认参数
May 30 Javascript
微信小程序 冒泡事件原理解析
Sep 27 Javascript
深入理解基于vue-cli的webpack打包优化实践及探索
Oct 14 Javascript
Vue中强制组件重新渲染的正确方法
Jan 03 Vue.js
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 中include()与require()的对比
2006/10/09 PHP
PHP批量删除jQuery操作
2017/07/23 PHP
PHP创建XML接口示例
2019/07/04 PHP
PHP的图像处理实例小结【文字水印、图片水印、压缩图像等】
2019/12/20 PHP
利用PHP内置SERVER开启web服务(本地开发使用)
2021/03/09 PHP
Javascript中arguments对象详解
2014/10/22 Javascript
什么是MEAN?JavaScript编程中的MEAN是什么意思?
2014/12/18 Javascript
3种js实现string的substring方法
2015/11/09 Javascript
基于JavaScript获取鼠标位置的各种方法
2015/12/16 Javascript
利用JQuery直接调用asp.net后台的简单方法
2016/10/27 Javascript
jQuery基于ajax操作json数据简单示例
2017/01/05 Javascript
ES6中class类用法实例浅析
2017/04/06 Javascript
JavaScript创建对象的七种方式(推荐)
2017/06/26 Javascript
微信小程序开发之好友列表字母列表跳转对应位置
2017/09/26 Javascript
jquery学习笔记之无new构建详解
2017/12/07 jQuery
vue 实现全选全不选的示例代码
2018/03/29 Javascript
vue中Axios的封装与API接口的管理详解
2018/08/09 Javascript
Vue 利用指令实现禁止反复发送请求的两种方法
2019/09/15 Javascript
ant-design-vue 实现表格内部字段验证功能
2019/12/16 Javascript
javascript 易错知识点实例小结
2020/04/25 Javascript
[01:05:07]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第一场2月1日
2021/03/11 DOTA
Python递归实现汉诺塔算法示例
2018/03/19 Python
Python文件监听工具pyinotify与watchdog实例
2018/10/15 Python
Python基础学习之函数方法实例详解
2019/06/18 Python
python tkinter控件布局项目实例
2019/11/04 Python
安装Pycharm2019以及配置anconda教程的方法步骤
2019/11/11 Python
详解如何在PyCharm控制台中输出彩色文字和背景
2020/08/17 Python
Juice Beauty官网:有机美容产品,护肤与化妆品
2020/06/13 全球购物
声明struct x1 { . . . }; 和typedef struct { . . . }x2;有什么不同
2012/06/02 面试题
大学生毕业自荐信
2013/10/10 职场文书
2015秋季开学典礼新闻稿
2015/07/17 职场文书
标准发言稿结尾
2019/07/18 职场文书
浅谈Redis主从复制以及主从复制原理
2021/05/29 Redis
Python实现批量自动整理文件
2022/03/16 Python
python turtle绘图
2022/05/04 Python
MySQL 逻辑备份 into outfile
2022/05/15 MySQL