使用JS添加一个body onload事件

Question

使用JS添加一个body onload事件

40

如何以跨浏览器的方式使用JS附加一个事件？就像这样简单？

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

- Robin Rodricks

为什么不直接使用你在示例中已经使用的东西呢？这对我来说很有效。 - Zac

7个回答

22

这利用了DOMContentLoaded - 在onload之前触发 - 但允许您插入所有不引人注目的内容...

window.onload - Dean Edwards - 博客文章中有更多相关信息 - 这里是从同一博客评论中复制的完整代码。

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

- gnarf

14

跨浏览器的window.load事件

function load(){}

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

- Aamir Afridi

9

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

最接近的“标准”替代方法是 addEventListener，但它不受 Internet Explorer 支持（它使用 attachEvent），因此你可能希望使用库（jQuery、MooTools、prototype.js 等）来为你抽象出跨浏览器的丑陋细节。

- Marcello Bastea-Forte

2

自Internet Explorer 9（http://msdn.microsoft.com/en-us/library/ie/ff975245(v=vs.85).aspx）起支持“addEventListener”。 - Sampson

2

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

这个方法解决了问题：

oldOnLoad = window.onload
window.onload = onLoad;

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

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

- hajamie

正如Rusky在Andreas的回答中指出的那样，window.onload与document.body.onload是不同的；它发生在所有内容都加载完成之后，而不仅仅是DOM。 - Muhd

由于至少从10版本开始，Firefox支持oldOnLoad = document.body.onload，因此我正在使用以下变体：如果（oldOnLoad = document.body.onload）{document.body.onload = onLoad;} else {oldOnLoad = window.onload; window.onload = onLoad;}。这似乎在大多数浏览器中都可以实现我的需求，window.onload选项作为需要时的后备选项。 - arlomedia

-1

对于不同的浏览器，您需要使用几种不同的方法。像jQuery这样的库为您提供了一个跨浏览器接口，可以为您处理所有这些。

- rpjohnst

-4

为什么不使用jQuery？

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

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

- jamesse

1

在完整文档加载之前触发此事件。 - rbrundritt

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Andreas Grech · Accepted Answer

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

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

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