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 ready函数、css函数及text()使用示例
Sep 27 Javascript
jQuery 实现侧边浮动导航菜单效果
Dec 26 Javascript
jQuery实现的支持IE的html滑动条
Mar 16 Javascript
Atitit.js的键盘按键事件捆绑and事件调度
Apr 01 Javascript
JavaScript中判断数据类型的方法总结
May 24 Javascript
jquery常用的12个小功能
Jul 22 Javascript
Vuejs第十三篇之组件——杂项
Sep 09 Javascript
利用Vue.js实现求职在线之职位查询功能
Jul 03 Javascript
JS如何实现在页面上快速定位(锚点跳转问题)
Aug 14 Javascript
详解node字体压缩插件font-spider的用法
Sep 28 Javascript
使用Angular 6创建各种动画效果的方法
Oct 10 Javascript
深入浅析Vue.js 中的 v-for 列表渲染指令
Nov 19 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
dede3.1分页文字采集过滤规则详说(图文教程)
2007/04/03 PHP
不错的PHP学习之php4与php5之间会穿梭一点点感悟
2007/05/03 PHP
php懒人函数 自动添加数据
2011/06/28 PHP
利用PHP+JS实现搜索自动提示(实例)
2013/06/09 PHP
WordPress中用于获取文章作者与分类信息的方法整理
2015/12/17 PHP
PHP使用php-resque库配合Redis实现MQ消息队列的教程
2016/06/29 PHP
thinkphp实现把数据库中的列的值存到下拉框中的方法
2017/01/20 PHP
PHP的RSA加密解密方法以及开发接口使用
2018/02/11 PHP
JavaScript入门教程(2) JS基础知识
2009/01/31 Javascript
javascript 打印页面代码
2009/03/24 Javascript
初识javascript 文档碎片
2010/07/13 Javascript
回车直接实现点击某按钮的效果即触发单击事件
2014/02/27 Javascript
JavaScript中的函数嵌套使用
2015/06/04 Javascript
利用node.js爬取指定排名网站的JS引用库详解
2017/07/25 Javascript
在Js页面通过POST传递参数跳转到新页面详解
2017/08/25 Javascript
解析vue中的$mount
2017/12/21 Javascript
详解VUE单页应用骨架屏方案
2019/01/17 Javascript
使用 Vue cli 3.0 构建自定义组件库的方法
2019/04/30 Javascript
vue-axios同时请求多个接口 等所有接口全部加载完成再处理操作
2020/11/09 Javascript
用python简单实现mysql数据同步到ElasticSearch的教程
2018/05/30 Python
python reverse反转部分数组的实例
2018/12/13 Python
python3实现点餐系统
2019/01/24 Python
python批量图片处理简单示例
2019/08/06 Python
Python数据可视化:泊松分布详解
2019/12/07 Python
Python socket聊天脚本代码实例
2020/01/02 Python
python计算auc的方法
2020/09/09 Python
python按照list中字典的某key去重的示例代码
2020/10/13 Python
美国气象仪器、花园装饰和墙壁艺术商店:Wind & Weather
2019/05/29 全球购物
美术指导求职信
2014/03/17 职场文书
恶搞卫生巾广告词
2014/03/18 职场文书
委托公证书
2014/04/08 职场文书
股份合作协议书
2014/09/10 职场文书
乡镇党员干部群众路线对照检查材料思想汇报
2014/09/28 职场文书
本科毕业论文致谢词
2015/05/14 职场文书
大学生社会实践感想
2015/08/11 职场文书
《搭石》教学反思
2016/02/18 职场文书