js在ie追加html,ie下动态加态js文件的方法
这里只讨论支持并行下载的浏览情况,大致分为两种,一种是按加向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文件的方法相关推荐
- ie下动态加态js文件
接触过相关知识的都知道,动态向DOM中添加js的script标签时,在各种浏览器下会有不同的表现. 这里只讨论支持并行下载的浏览情况,大致分为两种,一种是按加向DOM树中加的顺序执行,另一 ...
- 转载-ie下动态加态js文件
原文:http://www.cnblogs.com/jaiho/archive/2011/09/13/2174131.html 接触过相关知识的都知道,动态向DOM中添加js的script标签时,在各 ...
- HTML5动态加载资源方式,动态加载JavaScript文件的两种方法
这篇文章主要为大家详细介绍了动态加载JavaScript文件的两种方法,感兴趣的小伙伴们可以参考一下 第一种便是利用ajax方式,把script文件代码从背景加载到前台,而后对加载到的内容经过eval ...
- HTML5动态加载资源方式,动态加载JavaScript文件的3种方式
以下是遇到的几种动态加载JavaScript文件的方式,持续更新中... 一.使用document.write/writeln()方式 该种方式可以实现js文件的动态加载,原理就是在重写文档流,这种方 ...
- ExtJS4.x动态加载js文件
动态加载js文件是ext4.x的一个新特性,可以有效的减少浏览器的压力,提高渲染速度.如动态加载自定义组件 1.在js/extjs/ux目录下,建立自定义组件的js文件. 2.编写MyWindow.j ...
- 如何通过JavaScript动态加载js
在Web开发时,有可能会遇到这么一种情况:我们需要通过一个js文件中引用另一个js文件中的函数,可是另一个函数有没有办法在页面中通过该<script>标签加载.于是,我们有了通过js动态加 ...
- javascript中动态加载js、vbs脚本或者css样式表
目录:DynamicLoad类简介.属性.方法.事件.示例.下载. DynamicLoad类简介 本文将为您介绍一个在javascript中可以动态加载js.vbs脚本和css样式表的DynamicL ...
- js动态加载css文件和js文件的方法
今天研究了下js动态加载js文件和css文件的方法. 网上发现一个动态加载的方法.摘抄下来,方便自己以后使用 [code lang="html"] <html xmlns=& ...
- (一)JQuery动态加载js的三种方法
Jquery动态加载js的三种方法如下: 第一种: $.getscript("test.js"); 例如: <script type="text/javascrip ...
最新文章
- SP 2010: Getting started with Business Connectivity Services (BCS) in SharePoint 2010
- 腾讯数据中心负责人揭秘:半年时间如何搭好“山洞鹅厂”
- UNICODE与UTF-8的转换
- 李战java_【阿里李战】解剖JavaScript中的 null 和 undefined
- python多图合并成一张图_python使用PIL实现多张图片垂直合并
- Windows API ——WritePrivateProfileString——配置文件
- 信息奥赛一本通(1099:第n小的质数)
- 【git】gitk 通过图形界面工具来查看版本历史
- (35)FPGA面试技能提升篇(AD、DA、时钟芯片)
- spring 整合websocket过程中遇到的问题
- ActiveX控件使用总结
- matlab中uigetfile函数的使用
- 考试反思计算机专业,计算机专业期中考试分析与反思发
- 用Python3为您随机产生一个密码,是不是很高级嘞?
- 单片机c语言reti的用法,51系列单片机的RETI指令分析
- arm 协处理器cp14 cp15
- 工作区子系统设计时,同时也要考虑终端设备的用电需求,下面关于信息插座与电源插座之间的间距描述中,哪一个是正确的呢?
- PlayStation 4,PlayStation 4 Slim和PlayStation 4 Pro之间有什么区别?
- 正则表达式匹配替换网址
- java parcelable list_Parcelable序列化处理
热门文章
- Error, some other host already uses address 192.168.0.202错误解决方法
- VMware Workstation “The Msi Failed”解决方法
- Android 后台发送邮件 (收集应用异常信息+Demo代码)
- java.lang.IllegalArgumentException: Request header is too large的解决方法
- 如何制作出色的R可重现示例
- python defaultdict(list)_Python collections.defaultdict() 与 dict的使用和区别
- Linux基础,命令的使用以及环境的安装,jdk,mysql,tomcat
- php 读取mysql 二维数组_PHP操作 二维数组模拟mysql函数
- 普林斯顿大学计算机科学研究生条件,普林斯顿大学之计算机科学系
- qq语音按住ctrl就静音怎么解决_excel图形处理技巧:怎么制作出地摊经济的街景...