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

Question

这个问题就像这里和网络上的无数其他问题一样 - 如何检查 DOM 是否已加载到 Javascript 中？但这里有一个问题：

• 不使用 jQuery 等框架；
• 不知道您的脚本是通过静态放置的 <script> 标记加载的，还是在 DOM 加载之后很久之后通过其他一些 Javascript 加载的。

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

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

原文由 Vilx- 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

document.readyState 属性可用于检查文档是否准备就绪。来自 MDN：

价值观

文档的 readyState 可以是以下之一：

• loading – 文档仍在加载中。
• interactive – 文档已经完成加载并且文档已经被解析，但图像、样式表和框架等子资源仍在加载中。
• complete – 文档和所有子资源已完成加载。该状态表示 加载 事件即将触发。

代码示例：

 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!
    });
}

原文由 Digital Plane 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

如果依赖 document.readyState 问题，带轮询的快速解决方案：

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

原文由 Christoph 发布，翻译遵循 CC BY-SA 3.0 许可协议