码迷,mamicode.com
首页 > 其他好文 > 详细

DOMContentLoaded实现

时间:2014-12-09 00:31:28      阅读:188      评论:0      收藏:0      [点我收藏+]

标签:style   blog   io   ar   color   os   sp   java   on   

IE系列直到IE9才支持DOMContentLoaded事件,对于IE8及其之前版本,如果html内没有框架,则可以采用document.documentELement.doScroll来判断

是否构建好DOM树;如果html内有框架,则利用document的onreadystatechange事件判断当前DOM树是否构建完毕(框架html内容(只是html文件)加载之后DOM树构建完毕)。

所以可以采用这种方式:

  

        /**
         * 实现DomContentLoaded的兼容性
         * @param callback
         */
        var onDomContentLoaded = function(callback){
            var onlyOnce = true;
            var onReady = function(callback){
                if(onlyOnce){
                    onlyOnce = false;
                    onDomContentLoaded.isDomReady = true;
                    try{
                        callback();
                    }catch(e){
                        throw(new Error(‘DOM Ready callback occurs an error!‘))
                    }
                }
                return;
            }

            if(S.browser.isIe && !(‘HTMLElement‘ in window)){  // lt IE9
                if(self.top === self){
                    function s(){
                        try{
                            document.documentElement.doScroll(‘left‘);
                            onReady(callback);
                            return;
                        }catch(e){
                            setTimeout(s,50);
                        }
                    }
                    s();
                }else{ //包含框架
                    document.attachEvent(‘onreadystatechange‘,function(){
                        if(document.readyState === ‘complete‘){
                            onReady(callback);
                            document.detachEvent(‘onreadystatechange‘,arguments.callee);
                        }
                    });
                }

                document.onload = function(){
                    onReady(callback);
                    document.onload = null;
                };
            }else{
                document.addEventListener(‘DOMContentLoaded‘,function(){
                    onReady(callback);
                    document.removeEventListener(‘DOMContentLoaded‘,arguments.callee);
                },false);

                document.onload = function(){
                    onReady(callback);
                    document.onload = null;
                };
            }
        };    

另外,John Resig也在《精通javascript》提出了一种方法来判断DOM是否构建完毕,那就是不断轮训判断

if(document && document.getElementById && document.getElementsByTagName && document.body)是否为true,若为true,则

DOM构建完毕。

DOMContentLoaded实现

标签:style   blog   io   ar   color   os   sp   java   on   

原文地址:http://www.cnblogs.com/accordion/p/4152202.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!