Javascript 如何在没有框架的情况下检查DOM是否就绪？
这个问题就像这里和网络上的无数其他问题一样——如何检查DOM是否加载了Javascript？但问题是：Javascript 如何在没有框架的情况下检查DOM是否就绪？,javascript,dom,domready,Javascript,Dom,Domready,这个问题就像这里和网络上的无数其他问题一样——如何检查DOM是否加载了Javascript？但问题是： 不使用jQuery等框架 不知道您的脚本是通过静态放置的标记加载的，还是在DOM加载之后很久通过其他Javascript加载的 是否可以通过跨浏览器兼容性或多或少可靠地完成此操作 添加：让我澄清一下：我正在编写一个独立的.JS文件，可以包含在任意网页中。我想在加载DOM后执行代码。但是我不知道我的脚本将如何被收录。它可以通过放置标签（在这种情况下，传统的onload或DOM就绪解决方案将起
- 不使用jQuery等框架
- 不知道您的脚本是通过静态放置的
标记加载的，还是在DOM加载之后很久通过其他Javascript加载的
添加：让我澄清一下：我正在编写一个独立的.JS文件，可以包含在任意网页中。我想在加载DOM后执行代码。但是我不知道我的脚本将如何被收录。它可以通过放置
onload<html>
<head>
</head>
<body>
</body>
<script language="text/javascript">
window.onload = (function (oldOnLoad) {
return function () {
if (oldOnLoad) {
olOnLoad(); //fire old Onload event that was attached if any.
}
// your code to run after images/scripts are loaded
}
})(window.onload);
// your code to run after DOM is loaded
</script>
</html>
window.onload=（函数（oldOnLoad）{
返回函数（）{
如果（oldOnLoad）{
olOnLoad（）；//触发附加的旧Onload事件（如果有）。
}
//加载图像/脚本后要运行的代码
}
})（窗口加载）；
//加载DOM后要运行的代码
这里的许多onload绑定就是一个例子，基于Firefox、Opera和Webkit的浏览器都有一个文档级事件
DOMContentLoadeddocument.addEventListener（“DOMContentLoaded”，fn，false）onreadystatechangedocument.ready（）- 加载–文档仍在加载中
- 交互式–文档已完成加载，文档已被解析，但图像、样式表和帧等子资源仍在加载
- 完成–文档和所有子资源已完成加载。该状态指示事件即将触发
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!
});
}
如果依赖于
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)
DOMContentLoadeddocument.addEventListener("DOMContentLoaded", function(event)
{
console.log("DOM fully loaded and parsed");
}
+1.您可能希望添加一个解释，说明这是如何工作的，以供稍后搜索并找到可能没有太多经验的人使用。我认为您违反了“不知道您的脚本是否在DOM加载后很久通过静态放置的标记或其他Javascript加载”。很抱歉，我没有说过我在谈论一个独立的脚本。我澄清了这一点。window.onload在加载所有图像/脚本后运行。在我的情况下，我甚至不太在乎，但即使如此，仍然有很多DOM就绪脚本可用，因此不必担心。主要的问题是，我不知道onload事件是否很久以前就已经触发了，因此将另一个处理程序附加到它将没有任何效果。可以使用该属性，尽管我不确定浏览器兼容性…恐怕不是很好（请看这个小实用程序：它大约缩小了0.5kb。@DigitalPlane-我收回了它。它有非常好的浏览器支持！添加它作为答案，我会接受它。再一次，如果我在加载DOM后附加我的事件处理程序，这将不起作用。请看我包含的jQuery源代码。这就是为什么它们有以
addEventListener（）loadonl的事件吗oaddocument.addEventListener("DOMContentLoaded", function(event)
{
console.log("DOM fully loaded and parsed");
}