特色栏目

ASP源码

PHP源码

.NET源码

JSP源码

游戏频道
专题合集
关闭菜单
首页> WEB标准化> 模拟兼容性的addDOMLoadEvent事件

模拟兼容性的addDOMLoadEvent事件

时间:2009-08-04 19:25:12 作者:互联网

由于 wi***w.onload 事件需要在页面所有内容(包括图片等)加载完后,才执行,但往往我们更希望在 DOM 一加载完就执行脚本。其实在现在大部分主流浏览器上(Firefox 3+,Opera 9+,Safari 3+,Chrome 2+)都提供了这一事件方法:addDOMLoadEvent。

do***ent.addEventListener("DOMContentLoaded", init, false);

那对于 IE 我们如何模拟 addDOMLoadEvent 事件呢?

Matthias Miller 最早提供了如下的解决方案:

// for Internet Explorer (using conditional comments)
/*@cc_on @*/
/*@if (@_win32)
do***ent.write("");
var script = do***ent.getElementById("__ie_onload");
sc***t.onreadystatechange = function() {
    if (th***readyState == "complete") {
        init(); // call the onload handler
    }
};
/*@end @*/

Diego Perini 在其后提供了一种利用 doScroll() 方法来模拟 addDOMLoadEvent 事件的方案,且现在主流的 JavaScript 框架(JQuery、YUI等)基本都采用的这一解决方案。

原理基本如下:

当 ondocumentready 事件触发,文档( document )已经完全解析和建立。如果组件需要操作最初的文档结构,初始化代码需被安置在这之后。ondocumentready 事件告知组件,整个页面已被加载,且在 初始文档的 onload 事件触发之前立即触发。

一些方法,例如 doScroll,要求最初的文档被完全加载。如果这些方法是初始化函数的一部分,当ondocumentready 事件触发,他们将被执行。

/*
*
* IE***tentLoaded.js
*
* Author: Diego Perini (di***.perini at gm***.com) NWBOX S.r.l.
* Summary: DOMContentLoaded emulation for IE browsers
* Updated: 05/10/2007
* License: GPL/CC
* Version: TBD
*
*/
// @w    window reference
// @fn
    function referencefunction IEContentLoaded (w, fn) {
    var d = w.***ument, done = false,
    // only fire once
    init = function () {
        if (!done) {
            done = true;
            fn();
        }
    };
    // polling for no errors
    (function () {
        try {
            // throws errors until after ondocumentready
            d.***umentElement.doScroll('left');
        } catch (e) {
            setTimeout(ar***ents.callee, 50);
            return;
        }
        // no errors, fire
        init();
    })();
    // trying to always fire before onload
    d.***eadystatechange = function() {
        if (d.***dyState == 'complete') {
            d.***eadystatechange = null;
            init();
        }
    };
}

相关文章

相关应用

热门文章

猜你喜欢

返回顶部