Bienvenidos sean a este post, hoy hablaremos sobre dos eventos que son exclusivamente para el tag BODY ya que se encargan de monitorear cuando este elemento se carga y se descarga.
La sentencia onLoad es la encargada de monitorear cuando se esta cargando el elemento y nos permite llamar a una accion, en el caso de onUnLoad es para cuando cerramos la pagina o bien nos vamos a otra pagina, tambien el recargar una pagina puede llamarlo o salimos del navegador, veamos el siguiente ejemplo:
<html>
<head>
<title>Prueba de onClick</title>
<script language="Javascript">
<!--
function Pulsado(A)
{
var texto;
switch(A)
{
case "uno":
texto="Pulsaste el boton";
break;
case "dos":
texto="Pulsaste el link";
break;
default:
texto="Pulsaste la imagen";
break;
}
alert(texto);
}
function carga(A)
{
switch(A)
{
case "in":
alert("Bienvenidos a este ejemplo.");
break;
case "out":
window.open("https://tinchicus.com");
break;
}
}
//-->
</script>
</head>
<body onload="carga('in')" onunload="carga('out')">
<h3>Haz click sobre algunos de los siguientes ejemplos</h3>
<button type="button" onclick="Pulsado('uno');">Pulsame</button><br>
Clickea en este <a href="" onclick="Pulsado('dos');return false;">link</a>.<br>
<img onClick="Pulsado()" src="https://tinchicusplays.files.wordpress.com/2019/06/laguna-seca-raceway.jpg" width="640" height="360" border="0">
</body>
</html>Este es el ejemplo que vimos en este post pero le agregamos al tag BODY las sentencias para onLoad y onUnLoad, en ambos casos llamaran a una funcion llamada cargar a la cual le enviaremos un atributo que identificara si es el onLoad o el onUnLoad, con esto comentado pasemos a hablar sobre la nueva funcion, primero veamos el bloque:
function carga(A)
{
switch(A)
{
case "in":
alert("Bienvenidos a este ejemplo.");
break;
case "out":
window.open("https://tinchicus.com");
break;
}
}En este caso tendremos un switch para evaluar el valor de A, si es in nos mostara un mensaje cuando el elemento este en carga, en cambio si es out nos abrira una nueva pestaña o ventana, dependiendo de tu navegador, con la direccion HTTP informada, grabemos y probemos el ejemplo como se ve en el siguiente video
En este caso podemos ver como al cargar la pagina nos muestra la notificacion por medio del alert y cuando cerramos la pestaña nos abre una nueva con la URL informada, la sentencia onLoad nos permitira llamar a casi cualquier metodo o funcion, en cambio onUnLoad por un tema de seguridad no nos permitira algunas acciones y en algunos navegadores puede no funcionar correctamente.
Nota: Estuve verificando recientemente y puede suceder que onUnload ya no este funcionando en la mayoria de los navegadores.
En resumen, hoy hemos visto como trabajan los eventos de carga y descarga de una pagina, como son, para que se usan, su forma de usarlos en un codigo y un ejemplo donde lo pusimos en practica, espero les haya sido util sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.
Tengo un Patreon donde podes acceder de manera exclusiva a material para este blog antes de ser publicado, sigue los pasos del link para saber como.
Tambien podes donar
Es para mantenimiento del sitio, gracias!
$1.50
El blog de Tinchicus 