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 相关文章推荐
基于jQuery试卷自动排版系统
Jul 18 Javascript
javascript动画之圆形运动,环绕鼠标运动作小球
Jul 20 Javascript
Jquery工作常用实例 使用AJAX使网页进行异步更新
Jul 26 Javascript
jquery高效反选具体实现
May 05 Javascript
js过滤HTML标签以及空格的思路及代码
May 24 Javascript
JS正则表达式比较常见用法
Jan 26 Javascript
javascript数组常用方法汇总
Sep 10 Javascript
ajax实现动态下拉框示例
Jan 10 Javascript
JavaScript全屏和退出全屏事件总结(附代码)
Aug 17 Javascript
Vue中android4.4不兼容问题的解决方法
Sep 04 Javascript
JS实现的新闻列表自动滚动效果示例
Jan 30 Javascript
基于JavaScript判断两个对象内容是否相等
Jan 10 Javascript
使用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
Classes and Objects in PHP5-面向对象编程 [1]
2006/10/09 PHP
用PHP的socket实现客户端到服务端的通信实例详解
2017/02/04 PHP
TP5框架实现的数据库备份功能示例
2020/04/05 PHP
javascript function、指针及内置对象
2009/02/19 Javascript
在IE6下发生Internet Explorer cannot open the Internet site错误
2010/06/21 Javascript
js 手机号码合法性验证代码集合
2012/09/29 Javascript
用JavaScript修改CSS属性的代码
2013/05/06 Javascript
轻松创建nodejs服务器(2):nodejs服务器的构成分析
2014/12/18 NodeJs
js判断某个方法是否存在实例代码
2015/01/10 Javascript
jQuery实现根据类型自动显示和隐藏表单
2015/03/18 Javascript
详解基于Angular4+ server render(服务端渲染)开发教程
2017/08/28 Javascript
JS动态插入脚本和插入引用外部链接脚本的方法
2018/05/21 Javascript
angularjs $http调用接口的方式详解
2018/08/13 Javascript
Vue 页面状态保持页面间数据传输的一种方法(推荐)
2018/11/01 Javascript
浅谈Three.js截图并下载的大坑
2019/11/01 Javascript
vue 虚拟DOM的原理
2020/10/03 Javascript
vue项目打包后请求地址错误/打包后跨域操作
2020/11/04 Javascript
JavaScript仿京东轮播图效果
2021/02/25 Javascript
[01:42]辉夜杯战队访谈宣传片—FANTUAN
2015/12/25 DOTA
[40:55]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#4Newbee VS Fnatic
2016/03/03 DOTA
使用scrapy实现爬网站例子和实现网络爬虫(蜘蛛)的步骤
2014/01/23 Python
Python cx_freeze打包工具处理问题思路及解决办法
2016/02/13 Python
Python编程实现的简单Web服务器示例
2017/06/22 Python
在Django中输出matplotlib生成的图片方法
2018/05/24 Python
python创建文件备份的脚本
2018/09/11 Python
PyQt5图形界面播放音乐的实例
2019/06/17 Python
Pyqt5 基本界面组件之inputDialog的使用
2019/06/25 Python
python基于递归解决背包问题详解
2019/07/03 Python
QML使用Python的函数过程解析
2019/09/26 Python
python实现二分类和多分类的ROC曲线教程
2020/06/15 Python
用pandas划分数据集实现训练集和测试集
2020/07/20 Python
Electric官网:美国高级眼镜和配件品牌
2020/06/04 全球购物
领导班子自我剖析材料
2014/08/16 职场文书
2019朋友新婚祝福语精选
2019/10/10 职场文书
C站最全Python标准库总结,你想要的都在这里
2021/07/03 Python
Mysql数据库group by原理详解
2022/07/07 MySQL