 |
Evento onload y onunload
El evento onload de Javascript se activa cuando se termina de cargar la página. Se ha de colocar en la etiqueta <body>, aunque en versiones modernas de Javascript, también lo aceptan otros elementos como las imágenes.
Con el evento onload podemos ejecutar acciones justo cuando se han terminado de cargar todos los elementos de la página. Es un evento bastante utilizado pues es muy habitual que se deseen llevar a cabo acciones en ese preciso instante. En nuestro ejemplo vamos a ver cómo podríamos hacer un script para motivar a nuestros visitantes a que nos voten en un ranking cualquiera de páginas web.
La idea es que la página se cargue entera y, una vez esté cargada, aparezca una ventana de Javascript donde se proponga al visitante votar a la página. Es interesante esperar a que termine de cargar la página entera para que el visitante pueda ver la web que se propone votar, antes de que realmente le pidamos su voto.
El código sería el siguiente:
<html>
<head>
<title>Votame!!</title>
<script language="JavaScript">
function pedirVoto(){
if (confirm("Esta página está genial (ya la puedes ver). Me das tu voto?")){
alert("votaste");
}
}
</script>
</head>
<body onload="pedirVoto()">
<h1>Página bonita</h1>
<br>
Esta página está muy bonita. Soy su autor y te puedo asegurar que no hay muchas páginas con tanta calidad en Internet
<br>
<br>
<a href="#">Entrar</a>
</body>
</html>
El evento onload se dispara cuando terminamos de cargar toda la página. Es decir luego que se a creado el árbol con todos los elementos de la página. Es importante entender esto ya que lo utilizaremos mucho más adelante. Cuando se dispara este evento estamos seguro que todos los elementos de la página están creados.
El evento onunload se dispara cuando salimos del sitio y nos dirijimos por medio de un hipervínculo a otro o cerramos la ventana del navegador.
Veamos con un ejemplo como mostrar un alert de bienvenida al sitio y otro de despedida:
<!DOCTYPE html>
<html>
<head>
<title>Problema</title>
<script >
function ventanaBienvenida()
{
alert("Bienvenido a este sitio.");
}
function ventanaDespedida()
{
alert("Lo esperamos nuevamente.");
}
</script>
</head>
<body onload="ventanaBienvenida()" onunload="ventanaDespedida()">
Sitio.
</body>
</html>
El código javascript sería el siguiente:
function ventanaBienvenida()
{
alert("Bienvenido a este sitio.");
}
function ventanaDespedida()
{
alert("Lo esperamos nuevamente.");
}
La función ventanaBienvenida() se ejecuta inmediatamente finaliza la carga de la página en el navegador y la función ventanaDespedida() una vez que cerremos dicha página.