¿Qué etiquetas HTML apoyar el proceso de carga / onerror atributos de eventos de JavaScript?
-
22-08-2019 - |
Pregunta
Estoy familiarizado con el uso típico de onload
, como en el siguiente:
<body onload="alert('Hello, World!');">
...
</body>
¿Cuáles son todos los elementos HTML que disparan un evento de carga? (Ejecución así javascript suministrado en un atributo onload)
Por ejemplo, img
es uno de tales etiqueta que ejecutará el javascript suministrado en un atributo onload
cuando some.png
ha cargado:
<img onload="someImgLoaded()" src="some.png" />
Solución
'proceso de carga' con el apoyo de las siguientes etiquetas HTML:
<body>, <frame>, <frameset>, <iframe>, <img>, <link>, <script>
Y los siguientes objetos de Javascript:
image, layer, window
Otros consejos
A continuación se muestra una lista mucho más amplia de elementos que disparan un evento de carga cuando el recurso solicitado termine la descarga:
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?
En su mayor cobertura, lo mejor es tener en cuenta que todos los elementos HTML que hacen referencia a una URL se traducirá en una petición y disparar un evento load
o error
cuando esa solicitud para el éxito o fracasa. Así que, básicamente, cualquier elemento con un atributo src
o href
, a excepción de las siguientes etiquetas:
a
# What else? Not sure off hand..
Y incluyendo la etiqueta body
, ya que irónicamente no tiene un atributo src
O href
.
A continuación se muestra algunos javascript en bruto para el descubrimiento de estos elementos:
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:');
Además, con el "todo con href src o" método, se ignoran las etiquetas irrelevantes o de otro tipo que normalmente tienen un src o atributo href, pero no siempre.
Otras cosas que pueden tener fallos en la red:
- Application Cache
- XMLHttpRequest
- WebSocket
- PeerConnection (WebRTC)
- http://docs.webplatform.org/w/ index.php? search = onerror y texto completo = + & title = especiales% 3ASearch
onload
y onerror
atributos pueden ser útiles para hacer el seguimiento de si su usuario tiene una conexión activa a Internet, lo cual es algo que estoy tratando de hacer frente a la biblioteca con mis chequeos online.js: http://github.com/devinrhode2/check-online
Hay algunas pruebas evidentes que se realiza para ver si es o no
onload
es un evento específico a los elementos body
, frame
, iframe
, img
, link
, y script
. Básicamente cualquier cosa que representa un recurso para ser cargado. Para body
, que es el documento en cuestión. Para los demás, cada uno es bastante obvio.
Muchos elementos tienen el proceso de carga. Los puede encontrar aquí
Pero si desea probar la carga del DOM, entonces lo mejor es utilizar el window.onload . También se recomienda separar el código JavaScript del marcado HTML.
De acuerdo con esta página , se puede utilizar con onload
: <body>
, <frame>
, <frameset>
, <iframe>
, <img>
, <link>
y <script>
.