domReady的兼容性实现方法
一、为何要实现domReay方法？
举例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>domready</title>
<script src="domready.js"></script>
<script>
document.getElementById('p01').style.color='#ff0000'; //抛出错误 TypeError: document.getElementById(...) is null
</script>
</head>
<body>
<p id="p01">javascript中domready的实现方法</p>
</body>
</html>
我们需要给一些元素的事件绑定处理函数。但问题是，如果那个元素还没有加载到页面上，但是绑定事件已经执行完了，是没有效果的，如上所示。
平时我们都是如此做：
<script>
window.onload=function(){
document.getElementById('p01').style.color='#ff0000';
}
</script>
当 onload 事件触发时，需要等待页面上所有的DOM，样式表，脚本，图片，flash都已经加载完成。
当 DOMContentLoaded 事件触发时，仅当DOM加载完成，不包括样式表，图片，flash。
这两个事件大致就是用来避免这样一种情况，将绑定的函数放在这两个事件的回调中，保证能在页面的某些元素加载完毕之后再绑定事件的函数。
当然DOMContentLoaded机制更加合理，因为我们可以容忍图片，flash延迟加载，却不可以容忍看见内容后页面不可交互。
二、domReady实现
function domReady(fn){
//现代浏览器支持方法
if(document.addEventListener){
document.addEventListener('DOMContentLoaded', fn , false);
}else {
IEContentLoaded(fn);
}
//IE下模拟DOMContentLoaded
function IEContentLoaded(fn){
var d = window.document;
var flag = false;
//只执行一次用户的回调函数init()
var init = function () {
if(!flag){
flag = true;
fn();
}
};
//自执行匿名函数
(function () {
try {
// DOM树未创建之前调用doScroll会抛出错误
d.documentElement.doScroll('left');
} catch(e) {
// 延迟再执行一次
setTimeout(arguments.callee, 50);
return;
}
//没有错误就表示DOM树创建完毕，然后立即执行用户回调
init();
})();
//监听document的加载状态
d.onreadystatechange = function () {
//如果是在domready之后绑定的函数，就立马执行
if(d.readyState == 'complete'){
d.onreadystatechange = null;
init();
}
}
}
}
HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>domready</title>
<script src="domready.js"></script>
<script>
domReady(function () {
document.getElementById('p01').style.color='#ff0000';
})
</script>
</head>
<body>
<p id="p01">javascript中domready的实现方法</p>
</body>
</html>
domReady的兼容性实现方法的更多相关文章
- IE7,6与Fireofx的CSS兼容性处理方法集结
CSS对浏览器的兼容性有时让人很头疼,尤其是对于IE6这个问题多多的浏览器版本,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码 ...
- Atitit.提升api兼容性的方法 v3 q326
Atitit.提升api兼容性的方法 v3 q326 1. Atitit.兼容性的“一加三”策略1 2. 2. 扩展表模式1 3. 3. 同时运行模式1 3.1. 3.1. 完美的后向兼容性2 3.2 ...
- 测试web网站兼容性的方法
随着操作系统,浏览器越来越多样性,导致软件兼容性测试在目前软件测试领域占有很重要的地位,无论是B/S架构还是C/S架构的软件都需要进行兼容性测试,为了充分保证产品的平台无关性,使用户充分感受到软件的友 ...
- CSS浏览器兼容性问题解决方法总结
CSS浏览器兼容解决总结如下: 1. CSS中几种浏览器对不同关键字的支持,可进行浏览器兼容性重复定义 !important 可被FireFox和IE7识别 * 可被IE6.IE7识别 _ 可被IE6 ...
- IE7.JS解决IE兼容性问题方法
转自:http://code.google.com/p/ie7-js/ 使IE5,IE6兼容到IE7模式(推荐) <!--[if lt IE 7]> <script src=&quo ...
- 【转】 IE6 IE7 IE8 css bug兼容性解决方法总结归纳
1:li边距“无故”增加 任何事情都是有原因的,li边距也不例外. 先描述一下具体状况:有些时候li边距会突然增 加很多,值也不固定(只在IE6/IE7有这种现象),让人摸不着头脑,仔细“研究”发现是 ...
- 浏览器hack总结 详细的浏览器兼容性解决方法
由于各浏览器对页面的解析不同,会导致页面在不同浏览器中显示的样式不一致,为了保持页面的统一,经常需要对浏览器进行兼容性问题的调试. CSS Hack 面对浏览器诸多的兼容性问题,经常需要通过CSS样式 ...
- IE浏览器兼容性问题解决方法
如何用一行代码来解决CSS各种IE各种兼容性问题 一行代码来解决CSS在,IE6,IE7,IE8,IE9,IE10 各种兼容性问题. 在站点前端写代码的过程中,非常多时间IE各个版本号的兼容问题非常难 ...
- CSS兼容性解决方法!important的IE7，Firefox问题
转自:http://www.codesky.net/article/201008/139903.html 1. 首先谈谈!important问题的引起(盒模型问题): 在CSS标准中,一个盒模型包括4 ...
随机推荐
- Vue 去脚手架
上回模仿了一个nw,按照原理说,简单. 今天说Vue,脚手架是个好东西,做项目都给你配置好,不过对于我这种只想做一个界面的人来说,有点儿太大了,用不上. 如果说,不用脚手架要面临哪些问题呢. 1. 组 ...
- 安装Sql Server 2008的时候报错说找不到某个安装文件
在安装Sql Server 2008的时候,报错说找不到某个安装文件,但是这个文件明明在那,百思不得其解. 最后看到一个老外的文章里面说,你要确认,你能访问到这个文件 ...
- windows系统下npm升级的正确姿势以及原理
本文来自网易云社区 作者:陈观喜 网上关于npm升级很多方法多种多样,但是在windows系统下不是每种方法都会正确升级.其中在windows系统下主要的升级方法有以下三种: 首先最暴力的方法删掉no ...
- iOS中的数据库应用
iOS中的数据库应用 SLQLite简介 什么是SQLite SQLite是一款轻型的嵌入式数据库 它占用资源非常的低,在嵌入式设备中,可能只需要几百K的内存就够了 它的处理速度比Mysql.Post ...
- 子串查询（二维前缀数组） 2018"百度之星"程序设计大赛 - 资格赛
子串查询 Time Limit: 3500/3000 MS (Java/Others) Memory Limit: 262144/262144 K (Java/Others)Total Subm ...
- npx 命令介绍
这个是在 npmv5.2.0引入的一条命令(查看),引入这个命令的目的是为了提升开发者使用包内提供的命令行工具的体验. 为什么引入这个命令 举个例子,我们开发中要运行 parcel 命令来打包:par ...
- result returns more than one elements此种错误，解决
场景:公司产品开发完成后,接入第三方厂商,在进行接口联调的时候出现此问题.此接口报文中的每一个数据都要进行校验,有些是与已经存入产品数据库中的数据进行对比,看是否存在. 问题:在测试中,有些测试没有问 ...
- 孤荷凌寒自学python第七十三天开始写Python的第一个爬虫3
孤荷凌寒自学python第七十三天开始写Python的第一个爬虫3 (完整学习过程屏幕记录视频地址在文末) 今天在上一天的基础上继续完成对我的第一个代码程序的书写. 直接上代码.详细过程见文末屏幕录像 ...
- Module安装
利用pip3 install numpy,代表安装了数学模块 pip3 install -U numpy,代表升级数学模块 有的时候需要升级pip本身,如上所示,直接执行pip3 install -U ...
- memcached简单介绍及在django中的使用
什么是memcached? Memcached是一个高性能的分布式的内存对象缓存系统,全世界有不少公司采用这个缓存项目来构建大负载的网站,来分担数据库的压力.Memcached是通过在内存里维护一个统 ...