Portada | Monotemáticos | Secciones | Desarrolladores | Comunidad | Servicios | Servicios profesionales
Desde 0 | HTML | CSS | ASP | PHP | AJAX | Javascript | Promoción de webs | Rentabilidad de webs
Directorio | Manuales | Scripts | FAQs | Programas | Artículos Copyleft | Actualidad | La Cosecha | Colabora
Registrarse | Vuestras páginas | Foros del web | Lista de correo | Boletín de novedades
Generador METAs | Compras | Busca cursos
Alojamiento | Dominios.es | Micropagos SMS | Buscadores | Patentes, marcas | Creación web | Multimedia | Videos
Desarrollo Freelance | Buscar proyectos | Buscar profesionales | Solicitar desarrollo

Evento onload de Javascript


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.

 Seguir navegando a partir aquí:
+ 1 manual relacionado
+ 2 categorias relacionadas
+ 1 comentario no revisado

 Autoría, licencia y acciones sobre este artículo

Informe de Miguel Angel Alvarez*
Director de DesarrolloWeb.com

Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.

* Para consultas técnicas utilizar la lista de correo.

Versión imprimible Versión imprimible del artículo
Enviar artículo por e-mail Enviar artículo por e-mail
Añadir un comentario al artículo Publicar un comentario del artículo

Manuales relacionados con este artículo
Dentro de Programación en Javascript II

Categorias relacionadas
A través de las categorías de nuestro directorio se pueden encontrar otro tipo de recursos relacionados con este artículo:
+ Entrar en Javascript
+ Entrar en Scripts en Javascript


 Comentarios sin revisar
Entre los comentarios no revisados puede haber algunos interesantes que se hayan enviado recientemente.
 Se ha encontrado un comentario sin revisar

Ver el comentario no revisadoVer los comentarios no revisados
Añadir un comentario al artículo Añadir un comentario del artículo



Enlaces:
Maestrosdelweb
  Ir arriba

Manuales relacionados
+Programación en Javascript II
Categorías
+Javascript
+Scripts en Javascript

Lectura recomendada

Compra este libro en Agapea, la librería urgente a domicilio.

Tienda DesarrolloWeb

DesarrolloWeb.com | Copyright | Anunciese | Acerca de | Datos legales | Contacta | Por GuiarteMultimedia