En JavaScript, este evento puede aplicarse para iniciar una función en particular cuando la página se muestra por completo. También se puede utilizar para verificar el tipo y la versión del navegador del visitante. Podemos comprobar qué cookies utiliza una página utilizando el onload atributo.
En HTML, el atributo onload se activa cuando se carga un objeto. El propósito de este atributo es ejecutar un script cuando se carga el elemento asociado.
En HTML, el onload El atributo se usa generalmente con el
La diferencia entre document.onload y window.onload es: document.onload se activa antes de la carga de imágenes y otro contenido externo. Se dispara antes del window.onload. Mientras que la window.onload se activa cuando se carga toda la página, incluidos archivos CSS, archivos de script, imágenes, etc.
Sintaxis
Entendamos este evento usando algunos ejemplos.
Ejemplo 1
En este ejemplo, hay un elemento div con una altura de 200px y un ancho de 200px. Aquí, estamos usando el window.onload () para cambiar el color de fondo, el ancho y la altura del div elemento después de cargar la página web.
El color de fondo se establece en ‘rojo’, y el ancho y el alto se establecen en 300 px cada.
Este es un ejemplo de window.onload ()
Pruébelo ahora
Producción
Después de la ejecución del código y la carga de la página, el resultado será:
Ejemplo 2
En este ejemplo, estamos implementando una animación simple usando las propiedades del objeto DOM y funciones de javascript. Usamos la función de JavaScript getElementById () para obtener el objeto DOM y luego asignamos ese objeto a una variable global.
Pruébelo ahora
Producción
Después de la ejecución exitosa del código anterior, la salida será:
Ahora, hay un ejemplo en el que usaremos el HTML onload atributo y las funciones de JavaScript.
Ejemplo 3
Es un ejemplo simple del uso de HTML. onload atributo con la función definida en JavaScript. En este ejemplo, el alerta() se llama a la función cada vez que se actualiza el documento.
Ejemplo del atributo de carga HTML
Intente actualizar el documento para ver el efecto.
Pruébelo ahora
Producción
Después de la ejecución del código anterior, la salida será: