如何在没有框架的情况下检查DOM是否准备就绪？
这个问题是如此像在这里和在网络上的其他人 - 如何检查DOM是否加载了Javascript？ 但是这里有一个问题：
<script>标记加载，或者在DOM已经加载后很久以后通过其他Javascript加载。 这可以或多或少可靠地完成，并且具有跨浏览器兼容性？
补充：让我澄清一下：我正在编写一个可以包含在任意网页中的独立.JS文件。 我想在加载DOM 之后执行代码。 但我不知道怎么我的脚本将被包括在内。 它可以通过放置一个<script>标签（在这种情况下，传统的onload或DOM准备就绪解决方案将起作用）; 或者可以通过AJAX或其他方式加载，在DOM已经加载之后很久（因此前面提到的解决方案永远不会触发）。
document.readyState属性可用于检查文档是否准备就绪：
if(document.readyState === "complete") {
//Already loaded!
}
else {
//Add onload or DOMContentLoaded event listeners here: for example,
window.addEventListener("onload", function () {/* your code here */}, false);
//or
//document.addEventListener("DOMContentLoaded", function () {/* code */}, false);
}
基于Firefox，Opera和Webkit的浏览器具有文档级事件DOMContentLoaded ，您可以使用document.addEventListener("DOMContentLoaded", fn, false)来侦听。
在IE中它更复杂。 jQuery在IE中执行的操作是通过备份document.onload事件来监视文档对象上的onreadystatechange对于特定的readystate。 document.onload会在DOM准备好后才会触发（只有当所有图像完成加载后），所以它只被用作backstop，以防早期事件因某种原因不起作用。
如果你花一些时间Google搜索，你会发现代码来做到这一点。 我认为最经过审查的代码是在像jQuery和YUI这样的大型框架中进行的，即使我没有使用该框架，我也会在他们的源代码中寻找技术。
以下是document.ready()的jQuery 1.6.2源代码的主要部分：
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();
}
}
},
这适用于所有浏览器，简洁明了：
var execute = function () {
alert("executing code");
};
if ( !!(window.addEventListener) )
window.addEventListener("DOMContentLoaded", execute)
else // MSIE
window.attachEvent("onload", execute)