我知道我可以使用原型或 jQuery 等不同的框架将函数附加到window.onload，但这不是我想要的。
我需要类似的东西，.readyState以便我可以做这样的事情：
if(document.isReady){
var id = document.getElem ...
}
除了使用框架的功能之外，还有其他方法吗？
Javascript domready？
IT技术
javascript
dom-events
2021-01-28 00:39:07
6个回答
编辑：随着 2018 年的到来，我认为可以安全地聆听该DOMContentLoaded事件。
function fireOnReady() { /* ... */ }
if (document.readyState === 'complete') {
fireOnReady();
} else {
document.addEventListener("DOMContentLoaded", fireOnReady);
}
请注意，该事件只会在您的页面加载时触发一次！如果您必须支持非常旧的浏览器，请查看我在下面汇总的超轻量级脚本。
仅供历史参考：
jQuery 有一个名为 isReady 的未公开属性，它在内部用于确定 DOM 就绪事件是否已触发：
if($.isReady) {
// DOM is ready
} else {
// DOM is not yet ready
}
我从 1.5.2 开始回到 1.3.2 并且该属性在那里。虽然没有记录，但我想说您可以在 jQuery 的未来版本中依赖此属性。
编辑：一年后 - v1.7.2，他们仍在使用$.isReady- 仍然没有记录，所以请自担风险使用。升级时要小心。
编辑： v1.9，他们仍在使用$.isReady- 仍然没有记录
编辑： v2.0，所有它的“主要”变化，仍然使用$.isReady- 仍然没有记录
编辑： v3.x 仍然使用$.isReady- 仍然没有记录
编辑：正如几个人所指出的，上述内容并没有真正回答问题。所以我刚刚创建了一个迷你 DOM 就绪代码段，它的灵感来自达斯汀迪亚兹的更小的 DOM 就绪代码段。Dustin 创建了一种简洁的方法来检查文档 readyState 与类似的内容：
if( !/in/.test(document.readyState) ) {
// document is ready
} else {
// document is NOT ready
}
这样做的原因是浏览器有 3 种加载状态：“加载”、“交互”和“完成” （较旧的 WebKit 也使用“加载”，但您不必再担心）。您会注意到“loading”和“interactive”都包含文本“in”...所以如果在 中找到字符串“in” document.readyState，那么我们知道我们还没有准备好。
虽然我通常主张除非必要，否则避免使用框架，但我会说在这种情况下使用框架是完全没问题的。这是jQuery：
$(function () {
// do stuff after DOM has loaded
});
请注意，它与window.onload事件不同，因为onload在加载其他资源（图像等）之后首先执行。我在示例中使用的代码将在 DOM 完成加载时执行，即当完整的 HTML 结构可用时（不一定在图像、CSS 等可用时。）
如果你想要一个可检查的变量，你可以在就绪函数中设置一个：
var documentIsReady = false;
$(function () { documentIsReady = true; });
当然，如果您只想检查 DOM-ready，您可以找到比 jQuery 更轻量级的库。但是在不同浏览器行为非常不同的情况下使用库（这是一种这样的情况。）
使用DOMAssistant 库中的一些代码，制作您自己的“DOM 已准备好”功能应该不会太难：
var domLoaded = function (callback) {
/* Internet Explorer */
/*@cc_on
@if (@_win32 || @_win64)
document.write('<script id="ieScriptLoad" defer src="//:"><\/script>');
document.getElementById('ieScriptLoad').onreadystatechange = function() {
if (this.readyState == 'complete') {
callback();
}
};
@end @*/
/* Mozilla, Chrome, Opera */
if (document.addEventListener) {
document.addEventListener('DOMContentLoaded', callback, false);
}
/* Safari, iCab, Konqueror */
if (/KHTML|WebKit|iCab/i.test(navigator.userAgent)) {
var DOMLoadTimer = setInterval(function () {
if (/loaded|complete/i.test(document.readyState)) {
callback();
clearInterval(DOMLoadTimer);
}
}, 10);
}
/* Other web browsers */
window.onload = callback;
};
未经测试，但它应该可以工作。我从 DOMAssistant 简化了它，因为 DOMAssistant 允许多个回调并检查以确保您不能两次添加相同的函数等。
自从提出这个问题以来的 5 年里，DOMContentLoaded 已经成为一个普遍支持的事件，你可以直接使用它。
document.addEventListener('DOMContentLoaded', function() {
//.. do stuff ..
}, false);
我已经更新了DOMAssistant 库的代码，它对我来说很好用
var domReady = (function (){
var arrDomReadyCallBacks = [] ;
function excuteDomReadyCallBacks(){
for (var i=0; i < arrDomReadyCallBacks.length; i++) {
arrDomReadyCallBacks[i]();
}
arrDomReadyCallBacks = [] ;
}
return function (callback){
arrDomReadyCallBacks.push(callback);
/* Mozilla, Chrome, Opera */
if (document.addEventListener ) {
document.addEventListener('DOMContentLoaded', excuteDomReadyCallBacks, false);
}
/* Safari, iCab, Konqueror */
if (/KHTML|WebKit|iCab/i.test(navigator.userAgent)) {
browserTypeSet = true ;
var DOMLoadTimer = setInterval(function () {
if (/loaded|complete/i.test(document.readyState)) {
//callback();
excuteDomReadyCallBacks();
clearInterval(DOMLoadTimer);
}
}, 10);
}
/* Other web browsers */
window.onload = excuteDomReadyCallBacks;
}
})()
看看微软的这个演示。-> http://ie.microsoft.com/testdrive/HTML5/DOMContentLoaded/Default.html 这是允许您在 DOM 上运行 JS 准备好的代码的要点......
(function () {
function load2(){
// put whatever you need to load on DOM ready in here
document.getElementById("but3").addEventListener("click", doMore, false);
}
if (window.addEventListener) {
window.addEventListener('DOMContentLoaded', load2, false);
} else {
window.attachEvent('onload', load2);
}
} ());
这是演示的一些 javascript 源代码.. http://ie.microsoft.com/testdrive/Includes/Script/ReturnAndShareControls.js
它运作良好。很好！！...在谷歌浏览器和 IE 9 上。