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

更新时间：2011年09月13日 21:08:01 作者：

接触过相关知识的都知道，动态向DOM中添加js的script标签时，在各种浏览器下会有不同的表现。

这里只讨论支持并行下载的浏览情况，大致分为两种，一种是按加向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> 

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

您可能感兴趣的文章:

动态加态

uni-app开发微信小程序遇到的部分踩坑实战
最近在用uni-app开发微信小程序,这里将开发中遇到的坑和问题记录一下,所以下面这篇文章主要给大家介绍了关于uni-app开发微信小程序遇到的部分踩坑,需要的朋友可以参考下
2023-02-02
bootstrap学习笔记之初识bootstrap
Bootstrap是一款目前非常流行的前端框架，简单的说，就是html,css,javascript的工具集。本文给大家介绍bootstrap学习笔记之初识bootstrap，感兴趣的朋友一起学习吧
2016-06-06
js实现跟随鼠标移动且带关闭功能的图片广告实例
这篇文章主要介绍了js实现跟随鼠标移动且带关闭功能的图片广告,实例分析了javascript操作鼠标事件及html元素的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-02-02
JS实现一键复制
这篇文章主要为大家详细介绍了js实现点击按钮复制文本，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-07-07
js确认删除对话框效果的示例代码
本篇文章主要是对js确认删除对话框效果的示例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2014-02-02
javascript和jquery实现用户登录验证
这篇文章主要为大家详细介绍了javascript和jquery分别实现用户登录验证的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-05-05
JS数组中常用方法技巧学会进阶成为大佬
这篇文章主要为大家介绍了JS数组中常用的方法技巧，学会了你就在进阶成为大佬的道路上又迈进了一步，希望能够有所帮助，祝大家多多进步
2021-10-10
浅谈javascript中的作用域
首先说明一下：Js中的作用域不同于其他语言的作用域，要特别注意
2012-04-04
JS 拖动效果实现代码比较简单
JS拖动效果，计算的位移，主要是应用了鼠标事件与坐标控制。
2009-11-11
asp 的分词实现代码
asp 的分词实现代码...
2007-05-05