`

ie下动态加态js文件

javascripthtml 
阅读更多 
接触过相关知识的都知道，动态向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>
分享到：
| Maven POM 配置技巧(二)
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

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

    这样如果js文件间有依赖关系的话，且是按下载顺序执行，且在没有缓存的情况下就会报错（通常的情况下第一次执行会报错，http返回状态200，如果缓存未禁用，http状态是304，就不会报错了） 而ie就是按http下载完成的...

    swfupload控件实现flash文件上传

    11. **修复已知bug**：包括IE中的刷新问题，Firefox的滚动条问题，以及一些竞态条件和缓存问题。 12. **ASP.Net Forms兼容**：确保在ASP.Net环境中也能正常工作。 SWFUpload的设计理念是将用户界面的控制权交给...

    真正实现51Job的JS类

    2. **XML解析**：使用JavaScript的`DOMParser`或`ActiveXObject`（IE浏览器）来解析XML文件，获取其中的数据。 3. **DOM操作**：通过DOM API来操纵网页元素，如创建、查找、更新或删除HTML元素，以展示从XML中获取的...

    IE.rar_based浏览器

    在这种情况下，"基于IE"可能意味着它借鉴了IE的一些特性，如渲染引擎或者兼容性设置，以确保能够正确显示HTML、CSS和JavaScript代码。然而，由于是独立开发的，它也可能包含了一些自定义功能或改进，比如更好的安全...

    echarts.zip

    - **良好的兼容性**：ECharts基于JavaScript，支持现代浏览器和IE8+，同时提供对移动端的支持。 2. **echarts.min.js文件详解**： - **压缩和优化**："echarts.min.js"是ECharts的主要JavaScript库，经过了minify...

    SWFUpload 中文帮助手册

    13. **修复的bug**：包括IE中刷新导致的Flash加载问题，Firefox的滚动条问题，以及其他竞态条件和缓存问题。 14. **ASP.Net Forms兼容**：与.NET环境良好集成。 **设计原理：** 传统的HTML上传方式简单线性，但...

    zTree_v3 示例代码

    - **js**目录：包含zTree的JavaScript源码和必要的依赖文件，如jQuery库（如果未集成到项目中）。 - **images**目录：存储了zTree所需的图片资源，如展开/折叠图标、选中状态图标等。 - **json**目录：可能包含了...

    JQuery zTree v2.6

    这个程序包包含了所有必要的js文件以及示例，旨在帮助开发者在网页上快速构建交互式的树形结构，适用于数据展示、层级管理等多种场景。 ### 1. jQuery zTree概述 zTree是一款轻量级的jQuery插件，它提供了丰富的API...

    pda　ＷＩＮＣＥ　５．０浏览器开发

    7. **JavaScript执行环境**：为了支持动态交互，浏览器需要提供JavaScript执行环境，如JScript引擎。这涉及对ECMAScript标准的理解，以及异常处理、垃圾回收等机制。 8. **界面设计**：针对Windows CE 5.0的用户...

    阿赛企业建站系统 AsaiCoE v8 ASP.rar

    21、动静双态：后台轻松设置网站动态、静态访问模式，同时支持缓存机制；22、全站模糊搜索：支持多关键词的所有频道，模糊查询，如[阿赛 企业]，将查询含[阿赛]、[企业]的所有信息内容；23、阿赛上传系统：支持各种...

    C#浏览空空接口

    一种解决方案是使用JavaScript来动态调整元素的大小，但这仅适用于IE浏览器，并且可能引入额外的复杂性。 #### 浮动元素的清除 1. **浮动元素的影响**：当元素浮动时，后续的非浮动元素可能会被提升到浮动元素之上...

    ZTREE

    1. **引入资源** - 将ZTree的CSS和JS文件引入到HTML页面中。 2. **准备数据** - 根据ZTree支持的数据格式，准备节点数据。 3. **初始化设置** - 配置ZTree的基本属性，如节点展开方式、图标、事件等。 4. **创建树...

    js 全兼容可高亮二级缓冲折叠菜单

    这个菜单实例支持IE5.5、IE6、IE7、IE8、Firefox 3.0、谷歌、Safari 4.0、Opera 9.0等主流浏览器。 文档描述了制作一个全兼容可高亮二级缓冲折叠菜单的整个流程，包括HTML结构的搭建、样式控制以及行为层的...

    DHTMLX中文使用手册2.0版本.doc

    此外，DHTMLX Tree提供了带多选框的节点，支持两态和三态选择，用户可以根据需要定制图标，甚至可以通过JavaScript或XML来定义。节点还可以携带用户数据，并且支持多行显示，增强了用户体验。 在开发过程中，你需要...

    2021-2022计算机二级等级考试试题及答案No.365.docx

    10. 多态性：在面向对象编程中，多态性是指同一种接口可以有不同的实现方式，根据上下文环境，相同的方法调用可能会产生不同的行为。例如，继承自同一父类的子类可以覆盖或重载父类的方法，导致执行效果各异。 11. ...

    240多个jQuery插件.doc

    其轻量级的特点（压缩后仅21KB）以及对多种浏览器的良好兼容性（包括IE6.0+、Firefox 1.5+、Safari 2.0+、Opera 9.0+），使其成为开发者们构建动态网页的理想选择。 #### 二、jQuery插件的重要性 jQuery不仅本身...

    LR录制常见问题

    这种方式在资源利用率方面更高，但由于线程间的资源共享特性，可能会引起一些竞态条件等问题。 选择哪种模式取决于测试的需求和目标。通常情况下，LoadRunner默认采用进程模式，但在某些特定情况下，如需要模拟高...

    mootools_1.2 API.rar

    MooTools是一个强大的JavaScript库，它为Web开发提供了丰富的功能和高效的工具，使得开发者能够创建交互性强、响应迅速的网页应用。MooTools 1.2 API是该库的一个重要版本，提供了大量的类和方法，使得JavaScript...

    2021-2022计算机二级等级考试试题及答案No.3040.docx

    - JavaScript：JavaScript是一种常用的脚本语言，用于网页动态效果，不是用于CAD，选项C错误。 - 面向对象编程：面向对象语言的概念包括消息、继承和多态性，不包括模块，选项B错误。 6. 软件工程： - 装饰设计...

Magicbox
Global site tag (gtag.js) - Google Analytics