2009-03-24 5 views
21

Je suis familier avec l'utilisation typique de onload, comme dans les domaines suivants:Quelles balises html prennent en charge les attributs d'événement onload/onerror javascript?

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

Quels sont tous les éléments HTML déclencher un événement de charge? (Ainsi l'exécution de javascript fourni dans un attribut onload)

Par exemple, img est une telle étiquette qui exécutera le javascript fourni dans un onload attribut lorsque some.png a chargé:

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

Répondre

16

'onload' est pris en charge par les balises HTML suivantes:

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

Et les objets Javascript suivants:

image, layer, window

+0

Qu'en est-il des non-tags, comme un document DOM ou une fenêtre? (Je ne suis pas sûr, mais je pense qu'ils ont aussi onload.) – strager

+0

Wow, cette mise à jour était rapide. ; P +1 – strager

+0

Merci. Vous me faites paraître paresseux. :) –

2

onload est un événement spécifique à les éléments body, frame, iframe, img, link et script. Fondamentalement tout ce qui représente une ressource à charger. Pour body, c'est le document en question. Pour les autres, chacun est assez évident.

0

Selon this page, vous pouvez utiliser onload avec: <body>, <frame>, <frameset>, , <img>, <link> et <script>.

1

De nombreux éléments h ave l'événement onload. Vous pouvez les trouver here

Mais si vous voulez tester le chargement du DOM, il est préférable d'utiliser le window.onload. Il est également recommandé de séparer le code javascript du balisage HTML.

6

Voici une liste beaucoup plus complète d'éléments qui déclenchent un événement de charge lorsque la ressource demandée se termine le téléchargement:

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? 

Pour la plus grande couverture, il est préférable de considérer que tous les éléments HTML faisant référence à une URL résulteront dans une requête et déclenche un événement load ou error lorsque cette demande réussit ou échoue. Donc, en gros, tout élément avec un attribut src ou href, à l'exception de ces tags:

a 
# What else? Not sure off hand.. 

et y compris la balise body, car il ne ironiquement pas un attribut src OU href.

est dessous javascript difficile pour découvrir ces éléments:

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

En outre, la méthode « tout avec src ou href », vous ignorez les balises non pertinentes ou d'autres qui ont généralement un attribut src ou href, mais pas toujours.

D'autres choses qui peuvent avoir des pannes de réseau:

onload et Les attributs onerror peuvent être utiles pour savoir si votre utilisateur dispose ou non d'une connexion Internet active, ce que j'essaie d'adresser avec ma bibliothèque check-online.js: http://github.com/devinrhode2/check-online

fait pour voir si oui ou non

Questions connexes