简体   繁体   中英

What html tags support the onload/onerror javascript event attributes?

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

'onload' is supported by the following HTML tags:

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

And the following Javascript objects:

image, layer, window

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

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.

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.

根据此页面 ,您可以使用onload<body><frame><frameset><iframe><img><link><script>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM