18 de noviembre de 2010

Javascript y JQuery: Ejecutar una acción al abandonar una página web

Con Javascript y JQuery es bastante sencillo hacer que suceda algo al abandonar una página web. Contamos para ello con el evento unload. Así podemos, por ejemplo, mostrar un cuadro que indique que se está realizando una operación y hacer que ese cuadro se oculte al abandonar la página.

El sentido de esta opción es evitar que si el usuario pulsa la tecla de volver a la página anterior se encuentre con el cuadro de carga del que hablábamos. La función podría quedar así:

$(document).ready(function() {
    $(window).unload( function () { $('#precarga').hide('slow'); } );
});

En la página tenemos un div oculto con display:none que contiene un mensaje del tipo "Cargando...". Por ejemplo:

<div id='precarga' style='display:none;'>Accediendo a la base de datos. Puede llevar unos segundos.</div>

Así, cuando alguien pulsa en un botón para acceder a otra página mostramos la capa oculta llamada #precarga mediante

$('#precarga').show();

Con la tranquilidad de que el mensaje se ocultará en el preciso instante en el que el navegador abandone la página actual.