Evento onload

Eventos DOM Objeto Evento

Definición y uso

El evento onload ocurre después de que se carga el objeto.

El evento onload se utiliza con mayor frecuencia en el elemento <body>, para ejecutar scripts después de que la página web haya cargado todo su contenido (incluidas imágenes, archivos de scripts, archivos CSS, etc.).

El evento onload se puede usar para verificar el tipo y la versión del navegador del visitante y cargar la versión correcta de la página web en función de esta información.

El evento onload también se puede usar para manejar cookies (ver más ejemplos a continuación).

Ejemplo

Ejecutar JavaScript inmediatamente después de cargar la página:

<body onload="myFunction()">

Prueba personalmente

Ejemplo 2

Usar onload en el elemento <img>. Al cargar la imagen, muestra inmediatamente el mensaje "La imagen se ha cargado":

<img src="w3javascript.gif" onload="loadImage()" width="100" height="132">
<script>
function loadImage() {
  alert("La imagen se ha cargado");
}
</script>

Prueba personalmente

Ejemplo 3

Usar el evento onload para manejar cookies:

<body onload="checkCookies()">
<script>
function checkCookies() {
  var texto = "";
  if (navigator.cookieEnabled == true) {
    texto = "Las cookies están habilitadas.";
  } else {
     texto = "Las cookies no están habilitadas.";
  }
  document.getElementById("demo").innerHTML = texto;
}
</script>

Prueba personalmente

Sintaxis

En HTML:

<elemento onload="myScript">

Prueba personalmente

En JavaScript:

objeto.onload = function(){myScript};

Prueba personalmente

En JavaScript, utiliza el método addEventListener():

objeto.addEventListener("load", myScript);

Prueba personalmente

Notas:Internet Explorer 8 o versiones anteriores no lo admiten Método addEventListener().

Detalles técnicos

Burbujeante: No se admite
Cancelable: No se admite
Tipo de evento: Si se genera desde la interfaz de usuario,UiEvento. De lo contrario Evento.
Señaléticas de HTML admitidas: <body>, <frame>, <iframe>, <img>, <input type="image">, <link>, <script>, <style>
DOM 版本： Versión DOM:

Nivel 2 de eventos

Soporte de navegador Chrome IE Firefox Safari Opera
onload Soporte Soporte Soporte Soporte Soporte
Eventos DOM Objeto Evento