en Javascript

onBeforeUnload: Cómo recordarle al usuario que grabe antes de cerrar una pagina

Hace poco me surgió para un proyecto la necesidad de interceptar el cierre de la pestaña del navegador. La idea era que si el usuario estaba editando los datos de un formulario y cerraba la pestaña sin haber guardado estos datos, se le avisara de que iba a perder los datos y se le diera la oportunidad de cancelar el cierre y guardar la información del formulario.

Asi que investigando un poco descubri el evento onBeforeUnload que se comporta de una forma peculiar.

onBeforeUnload se lanza antes de que se descargue el contenido de la pagina, y es una funcion que está integrada en la mayoria de los navegadores. En los navegadores
donde no esté definida simplemente se ignora la asignación de este evento.

El tema es que el manejador de este evento debe devolver una cadena que es la que se mostrará al usuario junto con los botones de “Abandonar la página” o “Permanecer en la página”

Asi, para una captura de este evento de la siguiente manera:

Al cerrar la ventana nos apareceria el aviso. Este aviso tiene diferente formato según el navegador:

En Internet Explorer:

En Firefox:

En Chrome:

Si capturamos este evento deberiamos controlar cuando es necesario mostrar el mensaje (por ejemplo si el usuario no ha modificado ningun dato no deberia aparecer).

Para esto podemos utilizar tranquilamente una variable que se ponga a true cuando deba aparecer el mensaje:

 

Si queremos utilizar jQuery, tendremos que modificar el atributo returnValue del objeto que representa al evento:

 

Asi que con onBeforeUnload podemos añadir un detalle extra de seguridad para nuestros usuarios.

¿Qué opinas de esta funcion? ¿La conocias?

Esperamos vuestros comentarios

Posts Relacionados

jQuery Mobile: jQuery para teléfonos moviles /wp-content/uploads/2010/08/860626-284172.jpg             John Resig (creador de jQuery),  nos p...
Por qué no conviene usar variables globales en Ja... Desde hace tiempo vengo leyendo en muchos blogs de desarrollo con Javascript la recomendación de no utilizar variables globales en nuestro código. P...
Hydra.js, para hacer tus aplicaciones JS modulares... ¿Tu JavaScript se va haciendo cada vez mas grande y se está volviendo immanejable? ¿Estas buscando alguna arquitectura que te permita hacer ...
  • http://rub3nbdn.obolog.com rub3nbdn

    Genial recurso! :) 

    No conocia este evento del objeto window, conocía “onUnload” pero a diferencia de “onBeforeUnload”, con “onUnload” no hay vuelta atrás con el cierre de la pestaña o navegador.

    Por otro lado, he leido que el evento “onBeforeUnload” no está soportado para “Opera”, aunque es un “mal menor”,  ya que este evento está destinado en su mayoría de casos, para la prevención de que el usuario pierda sus datos si cierra la pestaña o el navegador y actualmente se soporta en los navegadores más utilizados.

    Saludos 😉 

  • http://informatica.obolog.com estelag

    Que buen post!

  • http://www.lombarte.org alombarte

    Esperemos que las páginas de publicidad SPAM no hagan abuso de la función, una función muy útil sin duda :)

  • http://www.raulmoron.com raulmoron

    Esta me la apunto!

    Gracias mago del frontend :) 

  • http://www.covertura.com juanmaguitar

    @rub3nbdn, Si, esta funcionalidad deberia ser considerada como un extra no como una barrera de seguridad ya que hay un pocentaje de navegadores (aunque sea pequeño) que no la soportan

    Gracias por el aporte! :-)

    @Estela, gracias!

    @Albert, sip, como todo el JS puede utilizarse para bien o para mal.  Esta funcionalidad nos permite añadir un extra de usabilidad a nuestras paginas.

    @Raul, thanks! :-)

  • http://www.rojiabogados.es Abogado Marbella

    Gracias por la información, es un recorso muy bueno…a mi se me olvida bastante guardar antes de cerrar..y supone un problema que con esto puede solucionarse de una forma sencilla…

  • Vladimir

    Excelente aporte, lo malo es que el evento se desencadena al actualizar la pagina algo que no seria muy agradable para el usuario o si como desarrollador quieres poner un cierre de session cuando el usuario cierre el navegador

  • bere

    Hola buen aporte, me gustaría saber si dentro de la función puedo llamar a un archivo de php, para que cuando cierre de esta forma el navegador se ejecuten algunas acciones contenidas en este archivo, se puede??? GRACIAS!!!

  • Juan

    pero esto no funciona en opera!!!

  • http://pacientesweb.com historia dental web

    Excelente entrada, estoy buscando y creo que esta funciona me ayudara al momento de alertar al usuario sobre que no ha guardado correctamente datos aqui el unico detalle que veo es habra alguna forma de tomar la variable o usarla para realizar una accion previa como guardar de forma automatica lo datos en caso de que a la advertencia confirme que si desea cerrar la pagina

  • http://eteamweb.com Anónimo

    hola a todos, muy bueno el post.

    He visto lo que se puede hacer, ahora tengo un problema que quisiera comentarles para que me ayuden:

    Tengo un vinculo a un fichero txt, cuando pinchamos todos sabemos que el navegador me muestra una nueva ventana para poder desgargarlo, como saber si Cancelaron la accion o descargaron el txt cuando se cierra esta ventana. O sea como saber con javascript si el usuario pincho en el boton Aceptar o Cancelar

  • http://www.zonaescorts.es/escortsbarcelona escorts barcelona

    Buen recurso, sin duda lo usaremos.

  • Efrain

    BUen aporte tenia tiempo buscando algo asi .. me sirvio muchisimo .. Graciasss .

  • aurora

    hola quisiera desabilitar esa funcion no quiero que me aparezca esa ventana de abandonar o permanecer como puedo hacer

  • pabloe9k

    Excelente! Funciona excelente.

  • Omar

    Me sirvió de mucho la funcion OnUnLoad no me sirvio en Chrome pero con esta me va de perlas.. muchas gracias!!!

  • http://www.digitalbit.es digitalbit

    Muy curioso, no lo conocía, lo he probado y me ha funcionado a la perfección. Muchas gracias.

  • http://www.jatm-playbacks.com Playbacks

    Es un buen recurso pero lamentablemente se abusa mucho de él en webs de spam, que te ponen trabas de cualquier tipo para que no abandones.

    También parece poco conocido por el resto de webs, no es muy común verlos fuera de páginas de dudosa procedencia.

  • rafael castro

    desde hace 2 meses lo estoy implementando en una app, ahora he metido las paginas dentro de una master page, el detalle esta en que en algunas veces si ejecuta la instruccion otras no, tengo duda el porque este comportamiento

  • Marco

    var bPreguntar = true;

    window.onbeforeunload = preguntarAntesDeSalir;

    function preguntarAntesDeSalir()
    {
    if (bPreguntar){
    return “¿Seguro que quieres salir?”
    //window.location.href=”../verificaciones/ConfirmarSalida.php”;
    };
    }

    Estoy usando este script, y funciona bien para hacer un aviso al usuario. Pero como haria si el usuario preciona el boton de -abandonar pagina- y hacer algun insert a una base de datos en ese momento. antes de que se cierre el navegador o algo asi.

  • http://www.lwpsac.com Brian

    Excelente!

  • http://tentadis.com Tentadis Sex Shop

    Un buen POST. No conocía esta función. Agregaremos a nuestro knowledgebase particular. :-)

  • http://www.borjagiron.com Borja

    Buen post! ¿Hay alguna opción para que salgo sólo cuando se hace click en el aspa de cierre de la pestaña o la página en lugar de cuando se hace click en el menú? En mi caso al enviar el formulario aparece el mensaje porque se sale de la página y no me vale… Gracias