如何在没有框架的情况下检查DOM是否准备就绪？

Question

问题就像在这里和网络上的其他人一样 - 如何检查DOM是否已加载Javascript？但这里有一个问题:

• 不使用像jQuery等框架;
• 不知道你的脚本是否已经通过静态放置的<script>标签加载,或者在DOM加载后很久之后通过其他一些Javascript加载.

这可以或多或少地可靠地完成并且具有跨浏览器兼容性吗？

补充:让我澄清一下:我正在编写一个独立的.JS文件,可以包含在任意网页中.我想在加载DOM 之后执行代码.但我不知道如何将我的脚本包括在内.可以通过放置<script>标签(在这种情况下,传统onload或DOM准备解决方案将起作用); 或者它可以通过AJAX或其他方式加载,很久以后DOM已经加载(所以前面提到的解决方案永远不会触发).

Answer 1

该document.readyState属性可用于检查文档是否已准备好:

if(document.readyState === "complete") {
    // Fully loaded!
}
else if(document.readyState === "interactive") {
    // DOM ready! Images, frames, and other subresources are still downloading.
}
else {
    // Loading still in progress.
    // To wait for it to complete, add "DOMContentLoaded" or "load" listeners.

    window.addEventListener("DOMContentLoaded", () => {
        // DOM ready! Images, frames, and other subresources are still downloading.
    });

    window.addEventListener("load", () => {
        // Fully loaded!
    });
}

Answer 2

Firefox,Opera和基于Webkit的浏览器都有一个DOMContentLoaded可以监听的文档级事件document.addEventListener("DOMContentLoaded", fn, false).

它在IE中更复杂.jQuery在IE中所做的是onreadystatechange通过document.onload事件的备份来查看特定readystate的文档对象.document.onload会在DOM准备就绪之后触发(仅当所有图像都已完成加载时),因此它仅用作后台,以防早期事件由于某种原因而无效.

如果你花一些时间谷歌搜索,你会找到代码来做到这一点.我认为执行此操作最多的代码是在jQuery和YUI等大型框架中,因此,即使我不使用该框架,我也会查看其源代码中的技术.

这是jQuery 1.6.2源代码的主要部分document.ready():

bindReady: function() {
    if ( readyList ) {
        return;
    }

    readyList = jQuery._Deferred();

    // Catch cases where $(document).ready() is called after the
    // browser event has already occurred.
    if ( document.readyState === "complete" ) {
        // Handle it asynchronously to allow scripts the opportunity to delay ready
        return setTimeout( jQuery.ready, 1 );
    }

    // Mozilla, Opera and webkit nightlies currently support this event
    if ( document.addEventListener ) {
        // Use the handy event callback
        document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );

        // A fallback to window.onload, that will always work
        window.addEventListener( "load", jQuery.ready, false );

    // If IE event model is used
    } else if ( document.attachEvent ) {
        // ensure firing before onload,
        // maybe late but safe also for iframes
        document.attachEvent( "onreadystatechange", DOMContentLoaded );

        // A fallback to window.onload, that will always work
        window.attachEvent( "onload", jQuery.ready );

        // If IE and not a frame
        // continually check to see if the document is ready
        var toplevel = false;

        try {
            toplevel = window.frameElement == null;
        } catch(e) {}

        if ( document.documentElement.doScroll && toplevel ) {
            doScrollCheck();
        }
    }
},

Answer 3

如果依赖document.readyState是可以的,快速和肮脏的解决方案与轮询:

(function() {
    var state = document.readyState;
    if(state === 'interactive' || state === 'complete') {
        // do stuff
    }
    else setTimeout(arguments.callee, 100);
})();

Answer 4

这适用于所有浏览器,简洁明了:

var execute = function () {
  alert("executing code");  
};

if ( !!(window.addEventListener) )
  window.addEventListener("DOMContentLoaded", execute)
else // MSIE
  window.attachEvent("onload", execute)

Answer 5

DOMContentLoaded当初始 HTML 文档完全加载和解析时会触发该事件，无需等待样式表、图像和子框架完成加载。好的一点是 chrome、firefox、IE9、opera 和 safari 同样支持它

document.addEventListener("DOMContentLoaded", function(event) 
{
    console.log("DOM fully loaded and parsed");
}

注意：Internet Explorer 8 支持readystatechange 事件，该事件可用于检测DOM 何时准备就绪。