Javascript - 如何检测文档是否已加载（IE 7/ Firefox 3）

javascript events addeventlistener onload

2022-08-30 02:08:17

我想在文档加载后调用函数，但文档可能已完成加载，也可能尚未完成加载。如果它确实加载了，那么我可以调用该函数。如果它没有加载，那么我可以附加一个事件侦听器。在 onload 已经触发后，我无法添加事件列表，因为它不会被调用。那么，如何检查文档是否已加载？我尝试了下面的代码，但它并不完全有效。有什么想法吗？

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);
    }
}

答案 1

不需要galambalazs提到的所有代码。在纯JavaScript中做到这一点的跨浏览器方法是简单地测试：document.readyState

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

这也是jQuery是如何做到的。

根据 JavaScript 的加载位置，可以在一个时间间隔内完成此操作：

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

实际上，可以有三种状态：document.readyState

在加载文档时返回“loading”，在完成解析但仍加载子资源时返回“交互式”，在加载后返回“完成”。-- document.readyState at Mozilla Developer Network

因此，如果您只需要DOM准备就绪，请检查.如果需要整个页面（包括图像）准备就绪，请检查。document.readyState === "interactive"document.readyState === "complete"

答案 2

无需图书馆。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;