用 JS 附加一个 body onload 事件答案

【问题标题】：Attach a body onload event with JS用 JS 附加一个 body onload 事件
【发布时间】：2010-11-17 04:25:31
【问题描述】：

如何以跨浏览器的方式使用 JS 附加 body onload 事件？就这么简单？

  document.body.onload = function(){
      alert("LOADED!");
  }

【问题讨论】：

为什么不在示例中使用您已经在做的事情？它对我有用

标签： javascript html events onload

【解决方案1】：

为什么不使用 jQuery？

$(document).ready(function(){}))

据我所知，这是完美的解决方案。

【讨论】：

在加载完整文档之前触发。

【解决方案2】：

跨浏览器window.load事件

function load(){}

window[ addEventListener ? 'addEventListener' : 'attachEvent' ]( addEventListener ? 'load' : 'onload', load )

【讨论】：

【解决方案3】：

document.body.onload 是一种跨浏览器，但它是一种遗留机制，只允许单个回调（您不能为其分配多个函数）。

Internet Explorer 不支持最接近的“标准”替代方案 addEventListener（它使用 attachEvent），因此您可能需要使用库（jQuery、MooTools、prototype.js 等）来抽象你的跨浏览器丑陋。

【讨论】：

Internet Explorer 支持addEventListener as of version 9。

【解决方案4】：

jcalfee314 的想法对我有用 - 我有一个 window.onload = onLoad，这意味着 <body onload="..."> 中的函数没有被调用（我无法控制）。

这解决了它：

oldOnLoad = window.onload
window.onload = onLoad;

function onLoad()
{
oldOnLoad();
...
}

编辑：Firefox 不喜欢oldOnLoad = document.body.onload;，所以替换为oldOnLoad = window.onload。

【讨论】：

Rusky 在 Andreas 的回答中指出，window.onload 与 document.body.onload 不同；它发生在所有内容都加载后，而不仅仅是 DOM。
因为 Firefox 至少早在 10 版就支持 oldOnLoad = document.body.onload，我正在使用这个的变体： if (oldOnLoad = document.body.onload) { document. body.onload = onLoad; } else { oldOnLoad = window.onload; window.onload = onLoad; }。这似乎给了我大多数浏览器想要的东西，window.onload 选项在需要时作为后备选项。

【解决方案5】：

这利用了 DOMContentLoaded - 它在 onload 之前触发 - 但允许您坚持所有的不显眼...

window.onload - Dean Edwards - 博客文章对此进行了更多讨论 - 这是从同一博客的 cmets 复制的完整代码。

// 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;

【讨论】：

【解决方案6】：

为什么不使用window 自己的onload 事件？

window.onload = function () {
      alert("LOADED!");
}

如果我没记错的话，所有浏览器都兼容。

【讨论】：

window.onload 发生在 /everything/ 加载之后，包括图片等。如果你想尽快开始操作 DOM 以防止启动滞后，你不能使用 window.onload。加载。

【解决方案7】：

对于不同的浏览器，您必须使用几种不同的方法。不过，像 jQuery 这样的库为您提供了一个跨浏览器界面，可以为您处理这一切。

【讨论】：