What html tags support the onload/onerror javascri

2020-01-24 13:28发布

站内问答 / JavaScript
1091 5 5

I'm familiar with the typical use of onload, as in the following:

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

What are all the html elements that fire a load event? (thus executing javascript supplied in an onload attribute)

For example, img is one such tag that will execute the javascript supplied in an onload attribute when some.png has loaded:

<img onload="someImgLoaded()" src="some.png" />

5条回答
Animai°情兽
2楼-- · 2020-01-24 14:03

'onload' is supported by the following HTML tags:

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

And the following Javascript objects:

image, layer, window

查看更多
0人赞 添加讨论(0) 举报
萌系小妹纸
3楼-- · 2020-01-24 14:03

Below is a much more comprehensive list of elements that fire a load event when the requested resource finishes downloading:

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?

For the most coverage, it's best to consider that all html elements referencing a url will result in a request and fire a load or error event when that request for the succeeds or fails. So, basically, any element with a src or href attribute, except for these tags:

a
# What else? Not sure off hand..

And including the body tag, because it ironically doesn't have a src OR href attribute.

Below is some rough javascript for discovering these elements:

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:');

Also, with the "everything with src or href" method, you ignore irrelevant or other tags that typically have a src or href attribute, but not always.

Other things that can have network failures:

onload and onerror attributes can be useful to keeping track of whether or not your user has an active internet connection, which is something I'm attempting to address with my library check-online.js: http://github.com/devinrhode2/check-online

There is some obvious testing to be done to see whether or not

查看更多
0人赞 添加讨论(0) 举报
一夜七次
4楼-- · 2020-01-24 14:05

onload is an event specific to the body, frame, iframe, img, link, and script elements. Basically anything which represents a resource to be loaded. For body, that is the document in question. For the others, each is fairly obvious.

查看更多
0人赞 添加讨论(0) 举报
神经病院院长
5楼-- · 2020-01-24 14:07

According to this page, you can use onload with: <body>, <frame>, <frameset>, <iframe>, <img>, <link>, and <script>.

查看更多
0人赞 添加讨论(0) 举报
放荡不羁爱自由
6楼-- · 2020-01-24 14:10

Many elements have the onload event. You can find them here

But if you want to test the loading of the DOM, then it's best to use the window.onload. It's also recommended that you separate the javascript code from the HTML markup.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)