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

StackOverflow https://stackoverflow.com/questions/679704

Question

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" />
Was it helpful?

Solution

'onload' is supported by the following HTML tags:

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

And the following Javascript objects:

image, layer, window

OTHER TIPS

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.

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

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top