logo标签列表

javascript: <body onload=""> and window.onload

javascriptonload-event
3
今天我遇到了一个奇怪的错误。我有一个简单的用户脚本，它在所有网站上添加了一个window.onload事件。但是其中一个网站定义了一个<body onload="func();">。发生的情况是window.onload像往常一样工作，但是在安装用户脚本后，<body onload="">在该网站上停止工作了。
当我使用window.body.onload代替时，两者都能正常工作。我知道window.onload和<body onload="">是做同样事情的不同方法，但是window.body.onload中发生了什么使其与<body onload="">良好地配合工作呢？
2个回答
2

Window.onload 和 body 标签的 onload 是同一个事件。因此，如果您通过两种不同的方法设置了相同的事件，它只会以一个值结束 - 一个函数。

window.body.onload 是一个独立的事件。这只是 DoM 的另一个怪癖和浏览器处理它的方式。

我在这里进行了测试http://jsfiddle.net/fe6jL/1/，似乎`window.body.onload`会在`<body onload>`之后触发。 - vikmalhotra
@Myforwik：我从未听说过window.body.onload，无论是IE（测试了6和9）、Chrome、Firefox还是Opera都似乎没有触发它：http://jsbin.com/ojibeq 你是不是指的是document.body.onload？如果是的话，据我所知，它与window.onload相同（至少在使用DOM0处理程序时是如此）：http://jsbin.com/izalik - T.J. Crowder
@ShiVik：你的测试有一个错误，其中之一是因为 jsfiddle 正在为你打包内容。代码 window.body.onload = alert("hello"); 调用 alert("hello") 并将其 返回值 赋给 window.body.onload。请尝试使用此方法：http://jsbin.com/izalik - T.J. Crowder
1

正如Myforwik所说，你使用window.onload = ...;来挂钩的事件与你使用<body onload="...">来挂钩的事件是相同的。它是window load事件。这两种挂钩方式都是旧的DOM0样式，已经过时了。如果你同时指定了这两种方式，后者将会覆盖前者。如果多个脚本独立设置了window.onload，也是一样的。

为了避免这些问题，使用DOM2风格的事件挂钩：

if (window.addEventListener) {
    // DOM2 standard
    window.addEventListener("load", handler, false);
}
else if (window.attachEvent) {
    // Microsoft's precursor to it, IE8 and earlier
    window.attachEvent("onload", handler);
}
else {
    // Some pre-1999 browser
    window.onload = handler;
}

function handler() {
}

多个DOM2处理程序可以附加到同一事件，因此多个不相关的脚本可以订阅它。此外，DOM2处理程序与DOM0处理程序可以和谐共存。

因此，如果您更新用户脚本以使用上述内容，则<body onload="...">页面不会受到影响。

http://jsfiddle.net/fe6jL/5/ - 运行该脚本只会显示一个 alert。 - vikmalhotra
2
@ShiVik：再次提醒，jsFiddle将你的所有脚本都包装在一个onload处理程序中（查看左侧的下拉菜单），这显然意味着当你的脚本运行时，事件已经发生了。你需要从下拉菜单中选择一个“no wrap”选项，或者使用http://jsbin.com这个工具，它会向你隐藏更少的内容。此外，在使用`addEventListener`时，请注意如何使用字符串`"load"`，而不是像在`attachEvent`中一样使用`"onload"`（请参见我的示例；你在你的fiddle中进行了更改）。另外，避免在与事件相关的事情上使用`alert`。工作示例：http://jsbin.com/agubat - T.J. Crowder
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接