ie下动态加态js文件

接触过相关知识的都知道，动态向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)：

/* 来自博客园：http://www.cnblogs.com/jaiho/archive/2011/09/12/2174131.html* 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事件方案相对好些。

P.S.：转载请注明出处，谢谢！JaiHo

转载于:https://www.cnblogs.com/jaiho/archive/2011/09/13/2174131.html

ie下动态加态js文件相关推荐

js在ie追加html,ie下动态加态js文件的方法
这里只讨论支持并行下载的浏览情况,大致分为两种,一种是按加向DOM树中加的顺序执行,另一种按下载完成的先后顺序执行:这样如果js文件间有依赖关系的话,且是按下载顺序执行,且在没有缓存的情况下就会报错( ...
转载-ie下动态加态js文件
原文:http://www.cnblogs.com/jaiho/archive/2011/09/13/2174131.html 接触过相关知识的都知道,动态向DOM中添加js的script标签时,在各 ...
ExtJS4.x动态加载js文件
动态加载js文件是ext4.x的一个新特性,可以有效的减少浏览器的压力,提高渲染速度.如动态加载自定义组件 1.在js/extjs/ux目录下,建立自定义组件的js文件. 2.编写MyWindow.j ...
JavaScript动态加载js文件
/********************************************************************** JavaScript动态加载js文件* 说明:* 之前没 ...
php动态页面加载慢,通过动态加载JS文件提升网站访问速度
相对与HTML,CSS,javascript是最影响浏览器性能的,因为浏览器在遇到<script>标签时,必须等待js代码下载和执行完毕后再执行后面的内容,因此当页面中js文件过多时,网站 ...
动态加载js文件是异步的
动态加载js文件是异步的. 今天调试一个错误,一个js方法各种调不到. 原因是因为所调方法的js文件是动态加载进来的. <script type="text/javascript&qu ...
在线客服系统源码开发实战总结：动态加载js文件实现粘贴一段js的sdk代码，直接引入插件效果...
常见的在线客服系统中,或者是统计代码中,粘贴一段js代码,就能引入某个插件的效果.这个是怎么实现的呢? 原理非常的简单: 对于不同的加载文件类型创建不同的节点,然后添加各自的属性,最后扔到head 标 ...
html动态加载js方法,原生JS实现动态加载js文件并在加载成功后执行回调函数的方法...
本文实例讲述了原生JS实现动态加载js文件并在加载成功后执行回调函数的方法.分享给大家供大家参考,具体如下: 有的时候需要动态加载一个javascript文件,并且在加载成功后执行回调函数(例如文件中 ...
java加载js_[Java教程]javascript如何动态加载js文件
[Java教程]javascript如何动态加载js文件 0 2016-01-01 00:00:52 javascript如何动态加载js文件: 有时候我们需要根据需要动态加载js文件,本章节就简单介 ...

ie下动态加态js文件

ie下动态加态js文件相关推荐

最新文章

热门文章