问题就像这里和网络上的无数其他人一样 - 如何检查 DOM 是否已在 Javascript 中加载？但这里有一个问题：
<script>标签还是在 DOM 加载之后很久才通过其他一些 Javascript 加载的。这可以或多或少地可靠地完成并具有跨浏览器兼容性吗？
补充：让我澄清一下：我正在编写一个独立的 .JS 文件，它可以包含在任意网页中。我想在加载 DOM后执行代码。但我不知道如何包含我的脚本。可以通过放置<script>标签（在这种情况下，传统onload或 DOM 就绪解决方案将起作用）；或者它可以通过 AJAX 或其他方式加载，在 DOM 已经加载之后很久（所以前面提到的解决方案永远不会触发）。
该document.readyState属性可用于检查文档是否准备就绪。来自 MDN：
value观
文档的 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!
});
}
Firefox、Opera 和基于 Webkit 的浏览器有一个文档级事件DOMContentLoaded，您可以使用document.addEventListener("DOMContentLoaded", fn, false).
在 IE 中更复杂。jQuery 在 IE 中所做的是onreadystatechange通过 document.onload 事件的备份监视文档对象的特定就绪状态。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();
}
}
},
如果依赖没问题document.readyState，使用轮询的快速解决方案：
(function() {
var state = document.readyState;
if(state === 'interactive' || state === 'complete') {
// do stuff
}
else setTimeout(arguments.callee, 100);
})();
这适用于所有浏览器并且简洁明了：
var execute = function () {
alert("executing code");
};
if ( !!(window.addEventListener) )
window.addEventListener("DOMContentLoaded", execute)
else // MSIE
window.attachEvent("onload", execute)
DOMContentLoaded当初始 HTML 文档完全加载和解析完毕时触发该事件，无需等待样式表、图像和子框架加载完成。好在 chrome、firefox、IE9、opera 和 safari 都支持它
document.addEventListener("DOMContentLoaded", function(event)
{
console.log("DOM fully loaded and parsed");
}
注意：Internet Explorer 8 支持 readystatechange 事件，可用于检测 DOM 何时准备就绪。