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

而ie就是按http下载完成的先后顺序执行js代码的,首先看下面的代码:

Model

//

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!');

};

}

//]]>

其中动态加载的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

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);

测试例子如下:

Loader

//

window.onload = function(){

var loader = DOMLoader();

loader.loadJS([ 'json.js', 'jquery-1.5.min.js', 'test.js' ]);

};

//]]>

可以看出加载的3个js文件是并行下载的。

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

js在ie追加html,ie下动态加态js文件的方法相关推荐

  1. ie下动态加态js文件

    接触过相关知识的都知道,动态向DOM中添加js的script标签时,在各种浏览器下会有不同的表现.       这里只讨论支持并行下载的浏览情况,大致分为两种,一种是按加向DOM树中加的顺序执行,另一 ...

  2. 转载-ie下动态加态js文件

    原文:http://www.cnblogs.com/jaiho/archive/2011/09/13/2174131.html 接触过相关知识的都知道,动态向DOM中添加js的script标签时,在各 ...

  3. HTML5动态加载资源方式,动态加载JavaScript文件的两种方法

    这篇文章主要为大家详细介绍了动态加载JavaScript文件的两种方法,感兴趣的小伙伴们可以参考一下 第一种便是利用ajax方式,把script文件代码从背景加载到前台,而后对加载到的内容经过eval ...

  4. HTML5动态加载资源方式,动态加载JavaScript文件的3种方式

    以下是遇到的几种动态加载JavaScript文件的方式,持续更新中... 一.使用document.write/writeln()方式 该种方式可以实现js文件的动态加载,原理就是在重写文档流,这种方 ...

  5. ExtJS4.x动态加载js文件

    动态加载js文件是ext4.x的一个新特性,可以有效的减少浏览器的压力,提高渲染速度.如动态加载自定义组件 1.在js/extjs/ux目录下,建立自定义组件的js文件. 2.编写MyWindow.j ...

  6. 如何通过JavaScript动态加载js

    在Web开发时,有可能会遇到这么一种情况:我们需要通过一个js文件中引用另一个js文件中的函数,可是另一个函数有没有办法在页面中通过该<script>标签加载.于是,我们有了通过js动态加 ...

  7. javascript中动态加载js、vbs脚本或者css样式表

    目录:DynamicLoad类简介.属性.方法.事件.示例.下载. DynamicLoad类简介 本文将为您介绍一个在javascript中可以动态加载js.vbs脚本和css样式表的DynamicL ...

  8. js动态加载css文件和js文件的方法

    今天研究了下js动态加载js文件和css文件的方法. 网上发现一个动态加载的方法.摘抄下来,方便自己以后使用 [code lang="html"] <html xmlns=& ...

  9. (一)JQuery动态加载js的三种方法

    Jquery动态加载js的三种方法如下: 第一种: $.getscript("test.js"); 例如: <script type="text/javascrip ...

最新文章

  1. SP 2010: Getting started with Business Connectivity Services (BCS) in SharePoint 2010
  2. 腾讯数据中心负责人揭秘:半年时间如何搭好“山洞鹅厂”
  3. UNICODE与UTF-8的转换
  4. 李战java_【阿里李战】解剖JavaScript中的 null 和 undefined
  5. python多图合并成一张图_python使用PIL实现多张图片垂直合并
  6. Windows API ——WritePrivateProfileString——配置文件
  7. 信息奥赛一本通(1099:第n小的质数)
  8. 【git】gitk 通过图形界面工具来查看版本历史
  9. (35)FPGA面试技能提升篇(AD、DA、时钟芯片)
  10. spring 整合websocket过程中遇到的问题
  11. ActiveX控件使用总结
  12. matlab中uigetfile函数的使用
  13. 考试反思计算机专业,计算机专业期中考试分析与反思发
  14. 用Python3为您随机产生一个密码,是不是很高级嘞?
  15. 单片机c语言reti的用法,51系列单片机的RETI指令分析
  16. arm 协处理器cp14 cp15
  17. 工作区子系统设计时,同时也要考虑终端设备的用电需求,下面关于信息插座与电源插座之间的间距描述中,哪一个是正确的呢?
  18. PlayStation 4,PlayStation 4 Slim和PlayStation 4 Pro之间有什么区别?
  19. 正则表达式匹配替换网址
  20. java parcelable list_Parcelable序列化处理

热门文章

  1. Error, some other host already uses address 192.168.0.202错误解决方法
  2. VMware Workstation “The Msi Failed”解决方法
  3. Android 后台发送邮件 (收集应用异常信息+Demo代码)
  4. java.lang.IllegalArgumentException: Request header is too large的解决方法
  5. 如何制作出色的R可重现示例
  6. python defaultdict(list)_Python collections.defaultdict() 与 dict的使用和区别
  7. Linux基础,命令的使用以及环境的安装,jdk,mysql,tomcat
  8. php 读取mysql 二维数组_PHP操作 二维数组模拟mysql函数
  9. 普林斯顿大学计算机科学研究生条件,普林斯顿大学之计算机科学系
  10. qq语音按住ctrl就静音怎么解决_excel图形处理技巧:怎么制作出地摊经济的街景...