Bienvenidos sean a este post, hoy hablaremos sobre dos eventos que tecnicamente se encargan de manejar los posibles errores de nuestros elementos.
El primero de ellos, onError, es el encargado de monitorear un error en cualquiera de nuestros elementos de la pagina y nos permitira mostrar una notificacion para esta falla, en cambio la segunda, onAbort, esta mas orientada a la falla de carga de una imagen, por ejemplo, pero esta relacionada a una epoca mas antigua de internet donde las conexiones eran mucho mas lentas y podiamos abortar la carga de los elementos en la pagina para hacer mas rapido, en todos los casos los errores pueden ser de cualquier indole y tanto del lado del navegador como del servidor, tomemos el codigo anterior y realicemos las siguientes modificaciones:
<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 porque(A)
{
switch(A)
{
case "pagina":
alert("Ocurrio un error en la pagina");
break;
case "imagen":
alert("Ha ocurrido un error con la imagen");
break;
}
}
//-->
</script>
</head>
<body onError="porque('pagina')">
<h3>Haz click sobre algunos de los siguientes ejemplos</h3>
<button type="button" onclick="Pulsdo('uno');">Pulsame</button><br>
Clickea en este <a href="" onclick="Pulsado('dos');return false;">link</a>.<br>
<img onClick="Pulsado()" onError="porque('imagen')" src="https://tinchicusplys.files.wordpress.com/2019/06/laguna-seca-raceway.jpg" width="640" height="360" border="0">
</body>
</html>En este ejemplo vamos a tomar prestado el del post anterior y quitaremos la funcion cargar y sacaremos del tag BODY los eventos onLoad y onUnLoad para reemplazar por la sentencia onError y que apunte a una funcion llamada porque a la cual enviaremos un valor, despues en el elemento boton modificaremos a onClick para que en lugar de llamar a Pulsado(‘uno‘) lo haga a Pulsdo(‘uno‘) y luego a la URL de la imagen le modificamos la direccion para que no encuentre la pagina, en ambos casos son para producir un posible error, y a la imagen le agregamos un onError que llame a porque pero envia otro valor, pasemos a analizar la nueva funcion como se ve en el siguiente bloque:
function porque(A)
{
switch(A)
{
case "pagina":
alert("Ocurrio un error en la pagina");
break;
case "imagen":
alert("Ha ocurrido un error con la imagen");
break;
}
}En esta funcion, tendremos un switch que evaluara el valor de A y en base al dato recibido tomaremos una accion, en el caso de pagina notificaremos que hubo un error en la pagina y en el caso de imagen nos mostrara un mensaje de notificacion de que hubo un error en la imagen, grabemos y probemos nuestra pagina como se ve en el siguiente video
En este caso tenemos tres mensajes, el primero que aparece es el mensaje de error cuando cargamos la pagina y no encontramos la imagen, despues pulsamos sobre el link y vemos que funciona correctamente pero cuando pulsamos sobre el boton nos devuelve el error de la pagina, el error de la pagina es interceptado porque se usa en el monitoreo del tag BODY y el otro lo pudimos aplicar a la tag IMAGE, el caso de onAbort no lo pude aplicar porque esta pensado para cuando se interrumpe la carga de la pagina o la imagen pero su forma de trabajo es muy similar a onError.
En resumen, hoy les he traido un evento increiblemente practico para nosotros como es onError, hemos visto para que se puede usar, como se aplica y un ejemplo practico para verlo en accion, 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 