`

Dom加载判断,兼容所有浏览器

 
阅读更多

Dom加载判断,兼容所有浏览器

 

Dom 加载完毕,兼容所有浏览器

Firefox2、Firefox3、Safari3.1+、Opera9.6+ 浏览器都能很好的支持,但 IE6、IE7 却不支持。

IE6、IE7 我们可以使用 js.onreadystatechange 来跟踪每个状态变化的情况(一般为 loading 、loaded、interactive、complete)

当返回状态为 loaded 或 complete 时,则表示加载完成,返回回调函数。  
Opera 支持 onreadystatechange

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " http://www.w3.org/TR/html4/strict.dtd ">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Untitled Document</title>
         <script language="JavaScript" type="text/javascript">
   if(document.attachEvent){
    document.onreadystatechange=function(){ 
                  if(document.readyState == 'loaded'||document.readyState=="complete"||document.readyState=='interactive'){  
                   document.getElementById("imgdivid").style.display="none";
                  Start();
                 }
    };
  }
  else{  
                      document.addEventListener("DOMContentLoaded",Start,false);   //非IE 
  }
  function Start(){
    alert("document.readyState=" + document.readyState + "\nYes,I'm running");
  }//]]>

  </script>
    </head>
    <body>
        <div align="center" id="imgdivid">
            <img src="wait.gif">
        </div>
    </body>
</html>

上面的代码若果不好,你可以封装自己的包里  底下是我写的类

dload2.js

/**
 * @author duping
 * Administrator
 */
 var  duduppp=function(){
   
           function  domReady(){
     var arr=new Array(); 
      if(arguments.length>0){
           for (var i = 0; i < arguments.length; i++) {      
       arr[i]= arguments[i];      
     }
      }
                   if(document.all){
         
          document.onreadystatechange=function(){       
      /*document.readyState=="complete"||document.readyState=='interactive'
       * 这样写会加载2次,先加载interactive 之后再加载complete
       * 如过要求效率的话写成interactive, opera  没有反应,opera 没有interactive 直接到complete
       * 所以 另写了
       */
      if(document.readyState=='loaded'||document.readyState=="complete"){            
      //  alert(arr[0]+"------------IE--------------------");
       Start(arr); 
                         
                           }         
      }
       }
       else{  
       // alert(arr[0]+"------------NO--IE--------------------");      
          document.addEventListener("DOMContentLoaded",Start(arr),false);
      }       
      function Start(arr){     
    for(var i=0;i<arr.length;i++){    
     if(typeof arr[i]=='function'){     
      arr[i]();
     }     
    }             
            }
              
            }
  
      return {domReady:domReady
               }
           }();

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " http://www.w3.org/TR/html4/strict.dtd ">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Untitled Document</title>
  <script language="JavaScript" type="text/javascript" src="js/dload2.js"></script>
        <script language="JavaScript" type="text/javascript">
           function test1(){
       var name=document.getElementById("name").value;   
       alert("my  method is  right"+name);
     }
     function test2(){
      alert("生活需要激情!");
     }
            duduppp.domReady(test1,test2);
             
        </script>
    </head>
    <body>
     <input type="text" id="name" value="1234">
    </body>
</html>

 

转自:http://hi.baidu.com/duduppp/blog/item/a2fb4ad43849c313a18bb795.html

分享到:
评论

相关推荐

    JS兼容所有浏览器的DOMContentLoaded事件

    使用JavaScript操作dom元素的时候,通常会将获取dom元素的代码放在[removed]=function(){}事件处理函数中,但[removed]事件在某些开始后可能会影响客户体验,因为要等待所有的脚本,css代码和图片等内容加载完毕才会...

    dom:DOM 快捷方式库

    它的主要目标不是兼容所有浏览器,而是简化常见操作。 用法 这个库是一个 AMD 模块,需要一个 AMD 加载器才能运行(例如 )。 应用程序接口 元素选择 dom.get([element, ] selector) : 选择一个元素 别名: dom.$ ...

    JavaScript 复制功能代码 兼容多浏览器(ZeroClipboard)

    Zero Clipboard实现简单跨浏览器复制 var clip = new ZeroClipboard.Client(); // 新建一个对象 clip.setHandCursor( true ); // 设置鼠标为手型 clip.setText("哈哈"); // 设置要复制的文本。 // 注册一个 button,...

    原生js滚动到底部加载数据Scrollload.zip

    Scrollload 是一个无依赖、体积极小(压缩 gzip后不到3k)、可配置性高(可以自定义加载时候动画、加载完后的dom、提前加载的距离)、可扩展性强大(很方便做到指定容器内的滚动、多tab的滚动、异常处理、刷新重新加载...

    js事件驱动机制 浏览器兼容处理方法

    第二种情况,用户没有对网页做操作,也可能产生事件,比如浏览器已经将整个页面加载完毕,会产生加载完成事件。当事件产生以后,浏览器会查找产生事件的节点有没有绑订相应的事件处理代码。如果有,则调用该代码来...

    傲游浏览器v3.3.6.2000 [2012-3-22]

    * 某些情况下状态栏辅助信息和工具栏图标无法加载的问题 [Webkit 核心] * 使用 PAC 代理可能导致 HTTPS 站点无法访问 * 完善 JS alert 对话框的处理 * 完善对 HTML5 游戏重力迷宫 Gravity Maze 的支持 * 完善对...

    Heng前端框架

    /* * Heng.js * 实现了与jQuery完全一致的调用方式和细节,内部已循环设置所有,... * H(fn) DOM加载完毕时执行, 等价于jQuery库中的$(fn)=$(document).ready(fn) * Author: wangheng * Date: 2015-07-16 */

    前端框架Heng.js

    /* * Heng.js * 实现了与jQuery完全一致的调用方式和细节,内部已循环设置所有,... * H(fn) DOM加载完毕时执行, 等价于jQuery库中的$(fn)=$(document).ready(fn) * Author: wangheng * Date: 2015-07-16 */

    AMF-JavaScript 后台管理框架.7z

    有效解决了使用AJAX单一Dom加载模式过多卡机,变量、函数冲突错乱等问题。保持各Dom之间既"分离"又可联系。 04) 标签: 超强的多标签窗口运行管理模式,无限极的左栏分类。 05) 扩展: 拥有无敌的用户扩展能力与插件...

    AMF-JavaScript 后台管理框架 v1.0

    有效解决了使用AJAX单一dom加载模式过多卡机,变量、函数冲突错乱等问题。保持各dom之间既"分离"又可联系。 04) 标签: 超强的多标签窗口运行管理模式,无限极的左栏分类。 05) 扩展: 拥有无敌的用户扩展能力与...

    cljs-test-dom-report-demo:https的演示项目

    这将自动编译并将所有更改发送到浏览器,而无需重新加载。 编译过程完成后,您将获得浏览器连接的REPL。 一个简单的尝试方法是: (js/alert "Am I connected?")并且您应该在浏览器窗口中看到警报。 要清除所有编译...

    kindeditor-4.1

    KindEditor 是什么? ... 主要特点 快速:体积小,加载速度快 开源:开放源代码,高水平,高品质 底层:内置自定义 DOM 类库,精确操作 DOM ...兼容:支持大部分主流浏览器,比如 IE、Firefox、Safari、Chrome、Opera

    vue2滚动条加载更多数据实现代码

    解析:判断滚动条到底部,需要用到DOM的三个属性值,即scrollTop、clientHeight、scrollHeight。scrollTop为滚动条在Y轴上的滚动距离。clientHeight为内容可视区域的高度。scrollHeight为内容可视区域的高度加上溢出...

    kindeditor-4.1.5.rar

    KindEditor 是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即...兼容:支持大部分主流浏览器,比如 IE、Firefox、Safari、Chrome、Opera 压缩内容简约已经被我简约化了,去除了一些自带的调试的文件!

    jul-comments:JCS-JUL评论系统-开源

    系统要求/下载桌面应用程序或:*具有JavaScript 1.5或更高版本引擎CSS2.1兼容网络浏览器*安装了Node.js 0.10.0或更高版本*或具有PHP 5.2.0或更高扩展名的网络服务器*最低分辨率1024x768支持所有主要浏览器,包括:...

    从零开始学习JQuery

    比如"在页面中编写加载时即执行的操作DOM的语句", 当页面代码很小用户加载很快时没有问题, 当页面加载稍慢时就会出现浏览器"终止操作"的错误.jQuery提供了很多简便的方法帮助我们解决这些问题, 一旦使用jQuery你就...

    P13_Blazor项目模板讲解ThreeBlazor2020_1_11.rar

    WebAssembly 是一种新的客户端技术,可以在所有现代浏览器(包括移动浏览器)中实现近乎原生的性能,而且不需要插件。 许多语言,包括 C、C#、Go 和 Rust,都可以编译成面向基于栈的 WebAssembly 虚拟机的代码。 ...

    PowerEasy_SiteWeaver_ALL6.7.rar

    快速:体积小,加载速度快 开源:开放源代码,高水平,高品质 底层:内置自定义 DOM 类库,精确操作 DOM 扩展:基于插件的设计,所有功能都...兼容:支持大部分主流浏览器,比如 IE、firefox、Safari、Chrome、Opera

    who-hand-hygiene-survey:基于世界卫生组织手部卫生五个时刻的手部卫生调查应用程序

    用于 DOM 操作的 (1.x 用于旧的 Internet Explorer 兼容性) 和用于管理应用程序逻辑和可视化。 允许通过 Backbone 本地存储数据。 用于 Javascript 库依赖管理和优化。 用于加载 HTML 模板。 开发环境 服务器...

Global site tag (gtag.js) - Google Analytics