哪些HTML标签支持onload/onerror JavaScript事件属性?

23

我熟悉onload的典型用法,如下:

<body onload="alert('Hello, World!');">
...
</body>

所有能触发load事件的HTML元素有哪些?(因此会执行在onload属性中提供的JavaScript代码)

例如,img是这样一个标签,当some.png已加载时,它将执行在onload属性中提供的JavaScript代码:

<img onload="someImgLoaded()" src="some.png" />
5个回答

18

'onload'被以下HTML标记支持:

<body>, <frame>, <frameset>, <iframe>, <img>, <link>, <script>

以及以下Javascript对象:

image, layer, window


你可能认为#Bill the Lizard自然而然地对犀牛书有审美上的了解,这在《JavaScript权威指南》(当然是O'Reilly出版社的)中很容易找到。 - dkretz
1
实际上,HTML4.01只允许在<frameset>和<body>中使用onload(来源:http://www.w3.org/TR/html401/interact/scripts.html#adef-onload),而且我*认为*对于脚本标签的`onload`存在一些跨浏览器问题。 - Christoph
3
无意冒犯,但我必须给这个回答点一个负分。你的声望很高,这会让其他人把你的回答看作"真理"而不再深究(如果我对这个特定问题不太了解,我也会这样)。由于还有许多其他因素需要考虑(大部分已经被Christoph提到),这可能会产生类似w3schools那样的负面影响。我认为这个问题本应该更加全面,或者至少应该更新以反映当前的标准。如果你修改了它,请发评论通知我,我会把分数改回来。 - VoidKing

10
以下是更全面的元素列表,当请求的资源下载完成时会触发load事件:
body # (just fires a load event, doesn't make requests itself)
img
image
link
iframe
frameset
frame
script
embed
object
video ?
  source
  track
audio ?
  source
svg
<input type="image" src="submit.gif" alt="Submit">
<object width="400" height="400" data="helloworld.swf"></object>
<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
webgl?

为了最大程度地覆盖,最好考虑所有引用URL的HTML元素都会触发请求并在请求成功或失败时触发loaderror事件。因此,基本上除了以下这些标签之外,任何具有srchref属性的元素:

a
# What else? Not sure off hand..

需要包含 body 标签,因为它具有讽刺意味的是没有 src 或者 href 属性。

以下是用于发现这些元素的初步 JavaScript 代码:

var tagsToIgnore = ['a'];

['src', 'href'].forEach(function(attr) {
  console.log('====' + attr + '====');
  [].slice.call(document.querySelectorAll('*[' + attr + ']')).forEach(function(el){
    if (!~tagsToIgnore.indexOf(el.tagName.toLowerCase())) {
      console.log(el.tagName);
    }
  });
});
console.log('body # :trollface:');

此外,使用“一切都有src或href”方法时,您会忽略通常具有src或href属性但不总是如此的无关标签。
其他可能导致网络故障的事物包括:
- 应用程序缓存 - XMLHttpRequest - WebSocket - PeerConnection(WebRTC) - 来源:http://docs.webplatform.org/w/index.php?search=onerror&fulltext=+&title=Special%3ASearch onloadonerror属性可用于跟踪用户是否拥有活动的互联网连接,这是我正在尝试通过我的库check-online.js解决的问题:http://github.com/devinrhode2/check-online 还有一些明显的测试需要进行,以查看是否...

“更全面的列表”应该包括它适用的HTML版本的信息。 - david
此时我不知道除了HTML 5之外还有谁会处理其他任何东西... - Devin Rhode

2

onload是特定于bodyframeiframeimglinkscript元素的事件。基本上,任何代表需要加载的资源的东西都可以使用该事件。对于body,它指的是相关文档。对于其他元素,每个元素的含义都很明显。


2

许多元素都有onload事件。您可以在这里找到它们。

但是,如果您想测试DOM的加载情况,最好使用window.onload。同时,建议将JavaScript代码与HTML标记分开。


0
根据本页面,您可以在以下标签中使用onload<body>, <frame>, <frameset>, <iframe>, <img>, <link><script>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接