`

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不仅本身...

    mootools_1.2 API.rar

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

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

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

    红技shop网上购物系统 v2.0.rar

    红技SHOP可以全站生成静态SHTML文件功能，后台管理的“一键生成全站静态SHTML”功能，您只需要轻点一下鼠标即可全站生成SHTML态静态页面，这不仅提高了网页打开速度而且提高了网站的安全性能而且又非常有利于各大...

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