Javascript domready？
我知道我可以使用不同的框架，如prototype或jQuery来将函数附加到window.onload，但这不是我想要的。
我需要像.readyState这样的东西，这样我才能做这样的事情：
if(document.isReady){
var id = document.getElem ...
}除了使用框架所做的事情之外，还有其他方法吗？
回答 9
Stack Overflow用户
发布于 2013-08-13 01:54:53
我已经更新了 DOMAssistant library的代码，它在我身上运行得很好
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;
}
})()Stack Overflow用户
发布于 2011-06-14 00:56:15
编辑：随着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 -仍未记录
编辑：正如一些人所指出的，以上并没有真正回答这个问题。因此，我刚刚创建了一个受Dustin Diaz的even smaller DOM ready snippet启发的mini DOM ready snippet。Dustin创建了一种简洁的方法来检查文档readyState，如下所示：
if( !/in/.test(document.readyState) ) {
// document is ready
} else {
// document is NOT ready
}这样做的原因是因为浏览器有3种加载状态：“加载”、“交互”和“完成”(较早的WebKit也使用“已加载”，但您不必再担心这些)。您会注意到，“正在加载”和“交互”都包含文本"in"...因此，如果在document.readyState内部找到字符串"in“，那么我们知道我们还没有准备好。
Stack Overflow用户
发布于 2009-07-30 14:33:19
虽然我通常主张在没有必要的情况下避免使用框架，但我想说在这种情况下使用框架是完全可以的。下面是jQuery：
$(function () {
// do stuff after DOM has loaded
});请注意，它与window.onload事件不同，因为onload在加载其他资源(图像等)后首先执行。我在示例中使用的代码将在DOM完成加载时执行，即当完整的HTML结构可用时(不一定当图像、CSS等可用时)。
如果你想要一个可检查的变量，你可以在ready-function中设置一个：
var documentIsReady = false;
$(function () { documentIsReady = true; });当然，如果您要做的只是检查是否支持DOM，那么您可以找到比jQuery更多的轻量级库。但是，在不同浏览器行为非常不同的情况下使用库(这就是这样的一种情况)。
使用DOMAssistant library中的一些代码，创建您自己的"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允许多个回调，并有检查，以确保您不能添加相同的函数两次等等。
https://stackoverflow.com/questions/1206937
复制相似问题
腾讯云开发者
