Javascript – 如何检测文档是否已经加载(IE 7 / Firefox 3)

我想在文档加载后调用一个函数,但文档可能已经完成,也可能没有完成加载。 如果确实加载了,那么我可以调用这个函数。 如果它没有加载,那么我可以附加一个事件监听器。 我不能添加一个事件侦听器,因为它不会被调用。 那么如何检查文档是否已经加载? 我尝试了下面的代码,但它不完全工作。 有任何想法吗?

var body = document.getElementsByTagName('BODY')[0]; // CONDITION DOES NOT WORK if (body && body.readyState == 'loaded') { DoStuffFunction(); } else { // CODE BELOW WORKS if (window.addEventListener) { window.addEventListener('load', DoStuffFunction, false); } else { window.attachEvent('onload', DoStuffFunction); } } 

galambalazs提到的所有代码都不需要。 在纯JavaScript中使用跨浏览器的方式仅仅是testingdocument.readyState

 if (document.readyState === "complete") { init(); } 

这也是jQuery如何做到这一点。

取决于JavaScript的加载位置,这可以在一个时间间隔内完成:

 var readyStateCheckInterval = setInterval(function() { if (document.readyState === "complete") { clearInterval(readyStateCheckInterval); init(); } }, 10); 

实际上, document.readyState可以有三种状态:

在文档加载时返回“加载”,一旦完成parsing,但仍然加载子资源,则为“交互式”,一旦加载,则“完成”。 – Mozilla开发者networking上的document.readyState

所以如果你只需要准备好DOM,请检查document.readyState === "interactive" 。 如果您需要整个页面准备好,包括图像,请检查document.readyState === "complete"

不需要图书馆。 顺便说一句,jQuery使用了这个脚本。

http://dean.edwards.name/weblog/2006/06/again/

 // Dean Edwards/Matthias Miller/John Resig function init() { // quit if this function has already been called if (arguments.callee.done) return; // flag this function so we don't do the same thing twice arguments.callee.done = true; // kill the timer if (_timer) clearInterval(_timer); // do stuff }; /* for Mozilla/Opera9 */ if (document.addEventListener) { document.addEventListener("DOMContentLoaded", init, false); } /* for Internet Explorer */ /*@cc_on @*/ /*@if (@_win32) document.write("<script id=__ie_onload defer src=javascript:void(0)><\/script>"); var script = document.getElementById("__ie_onload"); script.onreadystatechange = function() { if (this.readyState == "complete") { init(); // call the onload handler } }; /*@end @*/ /* for Safari */ if (/WebKit/i.test(navigator.userAgent)) { // sniff var _timer = setInterval(function() { if (/loaded|complete/.test(document.readyState)) { init(); // call the onload handler } }, 10); } /* for other browsers */ window.onload = init; 

你可能想要使用像jQuery,这使得JS编程更容易。

就像是:

 $(document).ready(function(){ // Your code here }); 

似乎要做你以后的事情。

如果你真的想要这个代码在加载时运行,而不是在domready(即你也需要加载图像),那么不幸的是,ready函数并不适合你。 我通常只是做这样的事情:

包含在文档的JavaScript(即总是调用onload被释放之前):

 var pageisloaded=0; window.addEvent('load',function(){ pageisloaded=1; }); 

那么你的代码:

 if (pageisloaded) { DoStuffFunction(); } else { window.addEvent('load',DoStuffFunction); } 

(或在您的偏好框架等效)。我使用此代码来为未来的页面JavaScript和图像进行预传。 由于我得到的东西根本不用于这个页面,我不希望它优先于图像的快速下载。

可能有更好的方法,但我还没有find它。

 if(document.loaded) { DoStuffFunction(); } else { if (window.addEventListener) { window.addEventListener('load', DoStuffFunction, false); } else { window.attachEvent('onload', DoStuffFunction); } } 

Mozila Firefox说, onreadystatechangeDOMContentLoaded的替代scheme。

 // alternative to DOMContentLoaded document.onreadystatechange = function () { if (document.readyState == "complete") { initApplication(); } } 

DOMContentLoaded ,Mozila的文档说:

DOMContentLoaded事件在文档被完全加载和parsing时触发,不需要等待样式表,图像和子帧完成加载(加载事件可以用来检测完全加载的页面)。

我认为load事件应该用于完整的文档+资源加载。

上面的JQuery是最简单和最常用的方法。 但是,您可以使用纯JavaScript,但是尝试在头部定义此脚本,以便在开始时读取它。 你在找什么是window.onload事件。

下面是一个简单的脚本,我创build运行一个计数器。 然后计数器在10次迭代之后停止

 window.onload=function() { var counter = 0; var interval1 = setInterval(function() { document.getElementById("div1").textContent=counter; counter++; if(counter==10) { clearInterval(interval1); } },1000); } 

尝试这个:

 var body = document.getElementsByTagName('BODY')[0]; // CONDITION DOES NOT WORK if ((body && body.readyState == 'loaded') || (body && body.readyState == 'complete') ) { DoStuffFunction(); } else { // CODE BELOW WORKS if (window.addEventListener) { window.addEventListener('load', DoStuffFunction, false); } else { window.attachEvent('onload',DoStuffFunction); } } 

我有其他的解决scheme,我的应用程序需要启动时,MyApp的新对象创build,所以它看起来像:

 function MyApp(objId){ this.init=function(){ //......... } this.run=function(){ if(!document || !document.body || !window[objId]){ window.setTimeout(objId+".run();",100); return; } this.init(); }; this.run(); } //and i am starting it var app=new MyApp('app'); 

它正在所有浏览器上工作,我知道。