IE里模拟DOMContentLoaded事件

作者：Rank 来源：never-online weblog 时间：2008-08-05 17:12:00　

也许还有朋友不太清楚DOMContentLoaded这个事件。简单的说，这个事件就是要在大多数情况下去替代window.onload事件，因为window.onload事件必须要等待页面所有元素的资源都下载完毕时才触发。

这个事件实际是上w3c推荐的标准事件，这个事件是在DOM树建成的时候触发，因此要比onload事件快很多。ff, opera高版本已经支持了该事件。而IE在IE8里依然没有想加这个事件的意思，为了实现IE与w3c的兼容，我们是有必要为IE做一件“好事”的。

一般是两种方法。

一种是创建空script标签，属性拥有defer，然后待onreadystatechange为complete时激发DOMContentLoaded
一种是通过调用doScroll('left')的原理去判断DOMContentLoaded

第一种方法

<script type="text/javascript">//<![CDATA[ var $ = document.getElementById; var fireDOMReadyEvent = function () { alert('DOM content loaded----------------http://www.never-online.net/blog/'); } if (!!window.ActiveXObject) { // Internet Explorer use defer attribute var src = (window.location.protocol == 'https') ? '://0' : 'javascript:void(0)'; document.write('<SCRIPT id=____dom_content_ready__ src="' + src + '" defer><\/script>'); $('____dom_content_ready__').onreadystatechange = function() { if (this.readyState == 'complete') { this.onreadystatechange = null; fireDOMReadyEvent(); } }; } //]]></script> <body> <img src="https://img.aspxhome.com/file/UploadPic/20088/5/200885171616513.jpg"> </body>

看上去应该没有什么问题了。但实际在使用当中还是遇到不少的问题，主要是协议，还有iframe。https协议需要单独判断。
iframe的问题在Jerry使用的时候发现比较大的问题，比如

<script type="text/javascript">//<![CDATA[ var $ = document.getElementById; var fireDOMReadyEvent = function () { alert('DOM content loaded----------------http://www.never-online.net/blog/'); } if (!!window.ActiveXObject) { // Internet Explorer use defer attribute var src = (window.location.protocol == 'https') ? '://0' : 'javascript:void(0)'; document.write('<SCRIPT id=____dom_content_ready__ src="' + src + '" defer><\/script>'); $('____dom_content_ready__').onreadystatechange = function() { if (this.readyState == 'complete') { this.onreadystatechange = null; fireDOMReadyEvent(); } }; } //]]></script><iframe src="http://www.csdn.net"></iframe>

它会在iframe加载完毕的时候才触发事件，显然不是我们所需要的。

也因为如此，我们现在很流行第二种方案：用doScroll方法。这主要是利用doScroll是是DOM树形成之后才可以操作。

<script type="text/javascript">//<![CDATA[ var $ = document.getElementById; var fireDOMReadyEvent = function () { window.clearInterval(timer) alert('DOM content loaded----------------http://www.never-online.net/blog/'); } if (!!window.ActiveXObject) { // Using doScroll method to instead of script tag to deal with DOM content loaded event var timer = null; try { timer = setInterval(function () { document.body.doScroll('left'); fireDOMReadyEvent(); }); } catch(ex) {}; } //]]></script><iframe src="http://www.csdn.net"></iframe><img src="https://img.aspxhome.com/file/UploadPic/20088/5/200885171616513.jpg">

以前听同事提过在YUI里有两种ready事件，一种是DOMContentLoaded，一种是ElementReady。还没有详细的去看代码，有兴趣的朋友也可看一下。

标签：DOM,ie,事件,javascript

0

投稿

猜你喜欢

IE7新支持的CSS属性和属性选择符

2008-03-16 14:26:00

纯手工打造CSS像素画

2009-03-09 12:57:00

Mootools 1.2教程(17)——手风琴插件

2008-12-11 13:39:00

如何隐藏IP地址的最后一位

2011-04-04 16:38:00

php面向对象程序设计介绍

2023-05-25 05:31:11

巧用Dreamweaver MX控制页面元素

2009-09-13 18:38:00

用户界面设计中“状态”和“动作”的表达

2011-01-06 12:36:00

SQL Server 2000安装图解教程

2009-09-09 19:59:00

ASP检测服务器相关的一些代码

2008-01-25 19:20:00

ASP获取ACCESS数据库的表名以及表名对应的字段名和字段类型

2009-12-25 18:57:00

ajax标签导航实例详解教程

2008-02-01 10:54:00

asp压缩access数据库方法代码

2008-08-08 12:22:00

交互设计实用指南系列(6) –标签明晰、有效

2010-01-21 12:39:00

图片滤镜效果[IE Only]

2009-06-14 19:49:00

SQL Server数据库管理常用SQL和T-SQL语句

2009-05-07 14:01:00

ASP验证码的实现原理及源码

2007-10-02 12:14:00

[关注细节的最佳方案]有效期时间格式的展现

2009-10-30 18:51:00

JavaScript链式调用的设计

2009-12-04 12:46:00

12个对网页设计师非常有用的图片优化工具[译]

2009-09-22 14:29:00

非常全面的实用JavaScript开发工具列表

2010-01-05 16:44:00

asp之家网络编程 m.aspxhome.com