一个通用onReady函数的实现

最新推荐文章于 2024-09-05 00:18:23 发布

原创最新推荐文章于 2024-09-05 00:18:23 发布 · 5.4k 阅读

0 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

23 篇文章

订阅专栏

本文详细介绍了如何修正DOM加载与DOMContentLoaded事件绑定时出现的异步加载问题，确保了动态加载的JavaScript文件能正确响应DOM加载完成事件。重点在于处理不同浏览器环境下的兼容性问题，确保在所有情况下都能正确执行回调函数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

define([], function(){
 
    function onReady(fn) {
        var DOC = document,
            html = DOC.documentElement,
            W3C = document.dispatchEvent;
        //FF以前是没有readyState属性的
        //判断body是否存在来决定DOM文档是否加载完毕
        if (!DOC.readyState) {
        var readyState = DOC.readyState = DOC.body ? "complete" : "loading";
        }
        //如果页面已经完全载入完毕直接执行回调函数
        if (DOC.readyState === "complete") {
            setTimeout(fn);
        //现代游览器和IE>=IE9
        } else if (W3C) {
            DOC.addEventListener('DOMContentLoaded', function(){
                if (readyState) {
                    DOC.readyState = 'complete';
                }
                fn();
            }, false);
        } else {
            ieReady(fn);
        }
    }

    function ieReady(fn) {
       try {
           //处理iframe中的页面在IE下无法通过doScroll判断DOM知否加载完毕
           if (self !== top && self.document.readyState !== 'complete') {
               setTimeout(function(){
                     ieReady.call(window, fn)
                 })
           } else if (self !== top && self.document.readyState === 'complete') {
               arguments[0]();
           } else {
               document.documentElement.doScroll('left');
                 arguments[0]();
           }
         } catch (e) {
             setTimeout(function(){
                 ieReady.call(window, fn)
             })
       }
   };

   AS.extend({
       'onReady': onReady
   });
   return onReady;
})

修正一个重大bug,ready函数是不能在AMD中定义从而异步加载的,因为DOMContentLoaded监听的触发时机是在DOM和JS.CSS加载执行完毕后,但有一个例外就是JS如果是动态加载进来的,DOMContentLoaded不会等待这个异步加载的js,所以如果将绑定DOMContentLoaded事件的函数写在动态加载的js中,有一个可能就是Dom已经加载完毕但动态加载的js中的为DOMContentLoaded绑定监听的代码还没有执行,所以很有可能你为DOMContentLoaded绑定的监听不会执行.