Evento onload de Javascript

  • Por
Con el evento onload podemos ejecutar acciones justo cuando se han terminado de cargar todos los elementos de la página.
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?")){
       window.open("http://www.loquesea.com/votar.php?idvoto=12111","","")
    }
}
</script>
</head>

<body onload="pedirVoto()">
<h1>Página SuperChula</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>

Nos fijamos que en la etiqueta <body> tenemos el evento onload="pedirVoto()". Es decir, que cuando se cargue la página se llamará a una función llamada pedirVoto(), que hemos definido en el bloque de script que tenemos en la cabecera.

La función pedirVoto() utiliza una caja confirm para saber si realmente el usuario desea votarnos. La función confirm() muestra una caja con un texto y dos botones, para aceptar o cancelar. El texto es lo que se recibe por parámetro. Dependiendo de lo que se pulse en los botones, la función confirm() devolverá un true, si se apretó el botón aceptar, o un false, en caso de que se pulsase sobre cancelar.

La función confirm() está a su vez metida dentro de un bloque condicional if, de modo que, dependiendo de lo que se pulsó en la caja confirm, el if se evaluará como positivo o negativo. En este caso sólo se realizan acciones si se pulsó sobre aceptar.

Para acceder a la página donde se contabiliza nuestro voto tenemos el método window.open(), que sirve para abrir ventanas secundarias o popups. Mostramos la página donde se vota en una ventana secundaria para que el visitante no se marche de nuestra web, ya que acaba de entrar y no deseamos que se vaya ya.

Con esto queda más o menos ilustrado cómo hacer uso del evento onload. Seguro que en vuestras creaciones habrá muchos más casos donde utilizarlo.

Autor

Miguel Angel Álvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Nacho

21/12/2005
En un frameset con dos frame (A y B), como puedo saber desde el frame (A) que ya se ha cargado el (B) sin usar el evento onload del frame (B)?

Jz

14/10/2008
Y si tengo dos funciones como las llamo en el Onload???

Agredesco las respuestas.

nessy00

05/3/2009
En mi caso, mi pagina no tiene body porque utilizo un mastepage, ¿cómo puedo conseguir el mismo efecto?

Fernando

27/10/2009
onload
Bien, El javascrit empieza cuando acaba de leer el codigo html. Pero tengo un document.write. El caso esque ahora el document.write me lo abre en otra ventan Sepuede arreglar?

miguel

13/3/2010
onload="InitPage(769px);
hola mi pagina no se me ve entera por los lados se ve con los bordes en negro aqi la puedes visiar www.miguel.es.kz y el onload="InitPage('769px'); es para lo largo de la pagina y me gustaria saber cual es el codigo para el ancho de la pagina

Francisco

19/8/2013
Javascript y VB
Hola muy buenas, queria saber si se puede pasar las variables que se cargan con la function window_onload() a variables predefinidas en VB.
este es el codigo de la pagina:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0039)http://192.168.0.226/Actual_Values.shtm -->
<HTML><HEAD><TITLE>Actual Values - FIXED Mode</TITLE>
<META http-equiv=Content-Type content="text/html; charset=windows-1252">
<META content="MSHTML 6.00.2900.5512" name=GENERATOR>
<META content=http://schemas.microsoft.com/intellisense/ie5
name=vs_targetSchema>
<META http-equiv=refresh content=2>
<SCRIPT language=javascript>
<!--
function getBit( Id, value, mask )
{
if ( value & mask )
{
Id.innerText = "YES";
}
else
{
Id.innerText = "NO";
}
}
//-->
</SCRIPT>

<SCRIPT language=javascript id=clientEventHandlersJS>
<!--

function window_onload()
{
getBit(Stat2Bit0,85,1);
getBit(Stat2Bit5,85,32);
getBit(Stat2Bit6,85,64);
}

//-->
</SCRIPT>
</HEAD>
<BODY language=javascript onload="return window_onload()"><FONT
face="MS SANS SERIF">
<TABLE width="100%" border=1>
<COLGROUP>
<COL width="40%">
<COL width="20%">
<COL width="40%"></COLGROUP>
<TBODY>
<TR align=left>
<TD><B>INTECONT PLUS VBW20600-09 1759 </B></TD>
<TD><B>Actual Values</B></TD>
<TD><B>192.168.0.226</B></TD></TR>
<TR align=left>
<TD>Scale on</TD>
<TD>
<DIV id=Stat2Bit0 style="DISPLAY: inline; WIDTH: 70px; HEIGHT: 15px"
ms_positioning="FlowLayout">Stat2Bit0 $$v</DIV></TD>
<TD></TD></TR>
<TR align=left>
<TD>General warning</TD>
<TD>
<DIV id=Stat2Bit6 style="DISPLAY: inline; WIDTH: 70px; HEIGHT: 15px"
ms_positioning="FlowLayout">Stat2Bit6 $$v</DIV></TD>
<TD></TD></TR>
<TR align=left>
<TD>General alarm</TD>
<TD>
<DIV id=Stat2Bit5 style="DISPLAY: inline; WIDTH: 70px; HEIGHT: 15px"
ms_positioning="FlowLayout">Stat2Bit5 $$v</DIV></TD>
<TD></TD></TR>
<TR align=left>
<TD>Highest-Priority Event</TD>
<TD>0318030C</TD>
<TD></TD></TR>
<TR align=left>
<TD>Feed Rate</TD>
<TD>485934.97</TD>
<TD>kg/h</TD></TR>
<TR align=left>
<TD>Totalizer 1</TD>
<TD>3506407.00</TD>
<TD>kg</TD></TR>
<TR align=left>
<TD>Fill Weight</TD>
<TD>66.87</TD>
<TD>kg</TD></TR>
<TR align=left>
<TD>Totalizer 2</TD>
<TD>2.02</TD>
<TD>kg</TD></TR>
<TR align=left>
<TD>Actual Setpoint</TD>
<TD>78100912.00</TD>
<TD>kg/h</TD></TR></TBODY></TABLE></FONT></BODY></HTML>


Un saludo y gracias de antemano.

Miguel Angel

15/1/2014
Consulta
cuando quiero abrir la pagina de hotmail, me aparece <body onload=javascript:();" cual es la causa y como evitarlo?. Gracias.

eduardo

15/3/2014
no me deja abrir el correo de hotmail
como puedo abrir el correo de hotmail y evitar el body onloa = javascript, le agradezco me ayude