ie下动态加态js文件的方法


Posted in Javascript onSeptember 13, 2011

这里只讨论支持并行下载的浏览情况,大致分为两种,一种是按加向DOM树中加的顺序执行,另一种按下载完成的先后顺序执行;这样如果js文件间有依赖关系的话,且是按下载顺序执行,且在没有缓存的情况下就会报错(通常的情况下第一次执行会报错,http返回状态200,如果缓存未禁用,http状态是304,就不会报错了)
而ie就是按http下载完成的先后顺序执行js代码的,首先看下面的代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Model</title> 
<meta http-equiv="Content-language" content="zh-CN" /> 
</head> 
<body> 
<div id="page"> 
</div><!-- Page end! --> 
<script type="text/javascript"> 
//<![CDATA[ 
var js = document.createElement('script'); 
js.type = 'text/javascript'; 
js.src = 'alert.js'; 
if(js.readyState){ 
js.onreadystatechange = function(){ 
if (js.readyState == "loaded" || js.readyState == "complete"){ 
alert(js.readyState); 
document.getElementsByTagName('head')[0].appendChild(js); 
} 
}; 
}else{ 
document.getElementsByTagName('head')[0].appendChild(js); 
js.onload = function(){ 
alert('loaded not in ie!'); 
}; 
} 
//]]> 
</script> 
</body> 
</html>

其中动态加载的alert.js文件中内容为:alert('in alert.js');
经过测试(ie8),可以发现弹出的内容先后为:loaded、in alert.js、complete
查资料可得ie下向DOM中添加script时有onreadystatechange事件(其它浏览器有onload事件),而事件中js.readyState的状态变化为:loading(下载中)、loaded(下载完成)、complete(代码执行完成)
从代码中可以看出我是在事件中才向DOM中添加创建的scrip结点的……
因此可以得出ie在创建scrip结点并给src赋值时就开始有http下载了,这与其它浏览器完全不同(其它浏览器是要把script结点加到DOM中才会有http下载的),而把scrip结点向DOM树中添加后才开始执行代码。
有了这些结论我们就可以解决ie下并行下载顺序执行的问题了;有两种方案:一种是边下载边顺序执行,另一种是全下载完再顺序执行。
两种各有好处,这里给出后一种情况的代码(loader.js):
/* 
* Author: JaiHo 
*/ 
(function(window){ 
var DOMLoader = (function(){ 
var DOMLoader = function(){ 
return new DOMLoader.prototype.init(); 
}; 
DOMLoader.prototype = { 
jsList:[], js_all:0, loaded_js:0, 
head:document.getElementsByTagName('head')[0], 
init:function(){ }, 
create_node:function(src){ 
var js = document.createElement('script'); 
js.type = 'text/javascript'; 
this.bindWait(js); 
this.jsList[this.jsList.length] = js; 
js.src = src; 
}, 
loadJS:function(list){ 
len = list.length; 
for(var i=0; i<len; i++){ 
if( i==len-1 ) 
this.js_all = len; 
this.create_node(list[i]); 
} 
return this; 
}, 
bindWait:function(js){ 
if(arguments.callee.caller!==this.create_node) return; 
var that = this; 
if(js.readyState){ 
js.onreadystatechange = function(){ 
if( js.readyState == 'loaded' ){ 
that.loaded_js++; 
if( that.js_all == that.loaded_js ){ 
that.head.appendChild( that.jsList.shift() ); 
} 
} 
if ( js.readyState == "complete" ){ 
js.onreadystatechange = null; 
if( that.jsList.length ){ 
that.head.appendChild( that.jsList.shift() ); 
} 
} 
}; 
}else{ 
js.onload = function(){ 
alert('not in ie!'); 
}; 
} 
return this; 
} 
}; 
DOMLoader.prototype.init.prototype = DOMLoader.prototype; 
return window.DOMLoader = DOMLoader; 
})(); 
})(window);

测试例子如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>Loader</title> 
<meta http-equiv="Content-language" content="zh-CN" /> 
<style type="text/css" media="all"> 
</style> 
</head> 
<body> 
<div> 
</div> 
<script type="text/javascript" src="loader.js"></script> 
<script type="text/javascript"> 
//<![CDATA[ 
window.onload = function(){ 
var loader = DOMLoader(); 
loader.loadJS([ 'json.js', 'jquery-1.5.min.js', 'test.js' ]); 
}; 
//]]> 
</script> 
</body> 
</html>

ie下动态加态js文件的方法

      可以看出加载的3个js文件是并行下载的。
      对于其它浏览器有动态加载js文件的并行下载和顺序执行问题的情况,目前还没有相对完美的解决方案(如果有了请指教一下。。),单从这个方面,个人觉得ie的这个onreadystatechange事件方案相对好些。

Javascript 相关文章推荐
JavaScript中void(0)的具体含义解释
Feb 27 Javascript
IE FF OPERA都可用的弹出层实现代码
Sep 29 Javascript
jQuery之选择组件的深入解析
Jun 19 Javascript
Javascript 遮罩层和加载效果代码
Aug 01 Javascript
纯js简单日历实现代码
Oct 05 Javascript
多个checkbox被选中时如何判断是否有自己想要的
Sep 22 Javascript
微信小程序 实例开发总结
Apr 26 Javascript
JS自动生成动态HTML验证码页面
Jun 14 Javascript
解决html-jquery/js引用外部图片时遇到看不了或出现403的问题
Sep 22 jQuery
vue项目中使用多选框的实例代码
Jul 22 Javascript
关于IDEA中的.VUE文件报错 Export declarations are not supported by current JavaScript version
Oct 17 Javascript
详解Vue2的diff算法
Jan 06 Vue.js
使用Json比用string返回数据更友好,也更面向对象一些
Sep 13 #Javascript
TextArea不支持maxlength的解决办法(jquery)
Sep 13 #Javascript
JQuery与JSon实现的无刷新分页代码
Sep 13 #Javascript
js Event对象的5种坐标
Sep 12 #Javascript
由JavaScript中call()方法引发的对面向对象继承机制call的思考
Sep 12 #Javascript
腾讯UED 漂亮的提示信息效果代码
Sep 12 #Javascript
jQuery的.live()和.die() 使用介绍
Sep 10 #Javascript
You might like
php木马webshell扫描器代码
2012/01/25 PHP
浅析memcache启动以及telnet命令详解
2013/06/28 PHP
浅谈php安全性需要注意的几点事项
2014/07/17 PHP
php实现的xml操作类
2016/01/15 PHP
PHP针对伪静态的注入总结【附asp与Python相关代码】
2017/08/01 PHP
PHP排序算法之简单选择排序(Simple Selection Sort)实例分析
2018/04/20 PHP
js父页面中使用子页面的方法
2016/01/09 Javascript
js实现的二分查找算法实例
2016/01/21 Javascript
PHP捕捉异常中断的方法
2016/10/24 Javascript
扩展jquery easyui tree的搜索树节点方法(推荐)
2016/10/28 Javascript
谈谈JavaScript中浏览器兼容问题的写法小议
2016/12/17 Javascript
解决AjaxFileupload 上传时会出现连接重置的问题
2017/07/07 Javascript
JavaScript反弹动画效果的实现代码
2017/07/13 Javascript
解决ie11 SCRIPT5011:不能执行已释放Script的代码问题
2019/05/05 Javascript
[02:27]2014DOTA2国际邀请赛 VG赛后采访:更大的挑战在等着我们
2014/07/13 DOTA
[46:14]VGJ.T vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python 布尔操作实现代码
2013/03/23 Python
Python守护进程用法实例分析
2015/06/04 Python
Python调用系统底层API播放wav文件的方法
2017/08/11 Python
python实现简单中文词频统计示例
2017/11/08 Python
pandas把dataframe转成Series,改变列中值的类型方法
2018/04/10 Python
WIn10+Anaconda环境下安装PyTorch(避坑指南)
2019/01/30 Python
Python:Numpy 求平均向量的实例
2019/06/29 Python
python3在同一行内输入n个数并用列表保存的例子
2019/07/20 Python
关于python中plt.hist参数的使用详解
2019/11/28 Python
Win系统PyQt5安装和使用教程
2019/12/25 Python
html5新增的属性和废除的属性简要概述
2013/02/20 HTML / CSS
HTML5几个设计和修改的页面范例分享
2015/09/29 HTML / CSS
波比布朗英国官网:Bobbi Brown英国
2017/11/13 全球购物
如何撰写岗位职责
2014/02/01 职场文书
倡议书范文格式
2014/05/12 职场文书
公司优秀员工推荐信
2015/03/24 职场文书
余世维讲座观后感
2015/06/11 职场文书
检讨书格式
2019/04/25 职场文书
Nginx反向代理及负载均衡如何实现(基于linux)
2021/03/31 Servers
SQL语法CONSTRAINT约束操作详情
2022/01/18 MySQL