Ghost全自动系统备份光盘正式版 V4.5 | 硬盘版 V2.0 | 排行榜 TOP50 | 图文推荐 | 玩小游戏

设为首页
加入收藏
联系站长

首页 >> JavaScript >> Js高级编程 >> IE里模拟DOMContentLoaded事件

IE里模拟DOMContentLoaded事件

作者:Rank 来源:never-online weblog 时间:2008-8-5 网友评论条【大中小】

也许还有朋友不太清楚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="/article/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="/article/UploadPic/20088/5/200885171616513.jpg"> [提示：你可先修改部分代码，再按运行]

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

【加入收藏】【报告错误】【投递文章】【复制地址】【返回顶部↑】

本文地址：http://www.aspxhome.com/javascript/program/20088/45225.htm

站长工具

相关文章

请稍等，评论加载中...

热门点击排行今日点击排行本周点击排行本月点击排行最新访问排行热门评论排行

首页 - 关于站点 - 联系站长 - 免责声明 - 版权隐私 - 网站地图 - 友情链接 - 广告服务 - Top

Aspxhome.com. 中国Asp之家. 版权所有

闽ICP备06017341号