UDN-企业互联网技术人气社区

板块导航

浏览  : 1491
回复  : 3

[原生js] IE8中动态创建script标签onload无效的解决方法

[复制链接]
饼干妹妹的头像 楼主
发表于 2017-1-11 14:18:20 | 显示全部楼层 |阅读模式
  这篇文章主要介绍了IE8中动态创建script标签onload无效的解决方法,涉及针对JavaScript加载顺序的调整,具有一定的参考借鉴价值,需要的朋友可以参考下

  本文实例讲述了IE8中动态创建script标签onload无效的解决方法。分享给大家供大家参考。具体分析如下:
  
  今天做项目,发现一个奇怪的问题,动态创建的script标签在IE8下无法触发onload事件。
  
  代码如下:
  
  复制代码 代码如下:
  1. var loadJs = function(src, fun){

  2.     var script = null;

  3.     script = document.createElement("script");

  4.     script.type = "text/JavaScript";

  5.     script.src = src;

  6.     if(typeof fun === "function"){

  7.         script.onload = fun;

  8.     }

  9.  

  10.     document.getElementsByTagName("head")[0].appendChild(script);

  11. };

  12.  

  13. loadJs("js/jquery-1.11.0.min.js", function(){

  14.     console.log("From jQuery");         

  15. });

  16.  

  17. loadJs("test.js", function(){

  18.     console.log("From test.js");         

  19. });

  20. test.js:

  21. console.log(typeof jQuery);
复制代码

  运行结果:
  
  复制代码 代码如下:
  1. undefined  // test.js运行时,jQuery还未加载

  2. >> typeof jQuery  // 从控制台上运行,却找到了jQuery对象,证明加载顺序问题

  3. "function"
复制代码

  并且以上代码中script.onload并没有执行,明明代码已经加载进来了,为什么还是onload不执行呢?到网上一查发现众多前端开发人员都遇到这个棘手的问题,于是找到了一些替补方案,如下:
  
  复制代码 代码如下:
  1. var loadJs = function(src, fun){

  2.     var script = null;

  3.     script = document.createElement("script");

  4.     script.type = "text/JavaScript";

  5.     script.src = src;

  6.     if(typeof fun === "function"){

  7.         script.onreadystatechange = function() {

  8.             var r = script.readyState;

  9.             console.log(src + ": " + r);

  10.             if (r === 'loaded' || r === 'complete') {

  11.                 script.onreadystatechange = null;

  12.                 fun();

  13.             }

  14.         };

  15.     }

  16.  

  17.     document.getElementsByTagName("head")[0].appendChild(script);

  18. };
复制代码

  执行结果:
  
  复制代码 代码如下:
  1. undefined 

  2. js/jquery-1.11.0.min.js: loading 

  3. test.js: complete 

  4. From test.js 

  5. js/jquery-1.11.0.min.js: loaded 

  6. From jQuery
复制代码

  执行步骤为,这下类似于onload的功能算然算是找到了,但却有一个问题,它不是按顺序加载的,当jQuery文件loading的时候,test.js已经complete了,并且第一行就先执行了test.js的内容。因为test.js先于jQuery执行,所以才打出undefined。于是我们可以改写成这样,让它线性加载:
  
  复制代码 代码如下:
  1. loadJs("js/jquery-1.11.0.min.js", function(){

  2.  

  3.     console.log("From jQuery"); 

  4.  

  5.     loadJs("test.js", function(){

  6.         console.log("From test.js");         

  7.     });       

  8. });
复制代码

  执行结果:
  
  复制代码 代码如下:
  1. js/jquery-1.11.0.min.js: loading 

  2. js/jquery-1.11.0.min.js: loaded 

  3. From jQuery 

  4. function

  5. test.js: complete 

  6. From test.js
复制代码

  这次,执行的顺序完全是按照我们预订的顺序来了,但以上代码看着很别扭,需要层层嵌套,于是又发现了这种写法:
  
  复制代码 代码如下:
  1. var loadJs = function(src, fun){

  2.     var script = null;

  3.     script = document.createElement("script");

  4.     script.type = "text/JavaScript";

  5.     script.src = src;

  6.     if(typeof fun === "function"){

  7.         script.onreadystatechange = function() {

  8.             var r = script.readyState;

  9.             console.log(src + ": " + r);

  10.             if (r === 'loaded' || r === 'complete') {

  11.                 script.onreadystatechange = null;

  12.                 fun();

  13.             }

  14.         };

  15.     }

  16.  

  17.     document.write(script.outerHTML);

  18.     //document.getElementsByTagName("head")[0].appendChild(script);

  19.  

  20. };

  21.  

  22. loadJs("js/jquery-1.11.0.min.js", function(){

  23.     console.log("From jQuery"); 

  24. });

  25.  

  26. loadJs("test.js", function(){

  27.     console.log("From test.js");         

  28. });
复制代码

  执行结果的顺序,也不相同:
  
  复制代码 代码如下:
  1. function

  2. js/jquery-1.11.0.min.js: loaded 

  3. From jQuery 

  4. test.js: loaded 

  5. From test.js
复制代码

  如果你改变一下加载顺序
  
  复制代码 代码如下:
  1. loadJs("test.js", function(){

  2.     console.log("From test.js");         

  3. });

  4.  

  5. loadJs("js/jquery-1.11.0.min.js", function(){

  6.     console.log("From jQuery"); 

  7. });
复制代码

  执行结果也就不一样,类似顺序加载:
  
  复制代码 代码如下:
  1. undefined 

  2. test.js: loaded 

  3. From test.js 

  4. js/jquery-1.11.0.min.js: loaded 

  5. From jQuery
复制代码

  希望本文所述对大家的JavaScript程序设计有所帮助。

相关帖子

发表于 2017-1-11 14:18:50 来自手机 | 显示全部楼层
还是挺有借鉴意义的
使用道具 举报

回复

发表于 2017-1-18 09:08:19 | 显示全部楼层
js太强大了,好多工作前端都可以做了…
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部