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

投稿

猜你喜欢

Django restful framework生成API文档过程详解

2021-08-10 16:37:16

oracle命令行删除与创建用户的代码

2009-03-02 10:54:00

python监控nginx端口和进程状态

2023-08-25 16:15:13

Go 实现热重启的详细介绍

2024-04-25 15:06:15

vue车牌搜索组件使用方法详解

2024-04-30 10:30:37

Python利用QQ邮箱发送邮件的实现方法(分享)

2023-01-06 23:23:25

Python实现绘制3D地球旋转效果

2021-04-17 22:25:37

Python入门学习指南分享

2023-09-02 15:02:21

对python .txt文件读取及数据处理方法总结

2022-08-04 02:36:07

解决python Jupyter不能导入外部包问题

2021-02-02 06:19:03

如何在CocosCreator中做一个List

2024-04-28 09:46:04

SQL Server中的排名函数与分析函数详解

2024-01-17 03:28:54

我要如何了解用户的需求

2007-08-26 17:19:00

mysql并发控制原理知识点

2024-01-24 15:21:46

EF(EntityFramework) 插入或更新数据报错的解决方法

2024-01-20 19:21:42

Python安装Flask环境及简单应用示例

2021-09-19 10:07:24

ORACLE 正则解决初使化数据格式不一致

2009-05-24 19:44:00

GO语言异常处理机制panic和recover分析

2024-02-18 01:58:36

基于vue实现微博三方登录流程解析

2024-05-03 15:08:42

Python利用matplotlib绘制折线图的新手教程

2021-08-18 18:00:01

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