Avisar de contenido inadecuado

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:

window.onbeforeunload = confirmaSalida;  

function confirmaSalida()   {    

       return "Vas a abandonar esta pagina. Si has hecho algun cambio sin grabar vas a perder todos los datos.";  

}

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:

window.onbeforeunload = confirmaSalida;  

function confirmaSalida()   {    

       if (datosModificadosSinGuardar) {

              return "Vas a abandonar esta pagina. Si has hecho algun cambio sin grabar vas a perder todos los datos.";  

       }

}

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

$(window).bind(“beforeunload”, function(eEvent) {    

       if (datosModificadosSinGuardar) {

              eEvent.returnValue "Vas a abandonar esta pagina. Si has hecho algun cambio sin grabar vas a perder todos los datos.";  

       }

}

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

{
}
{
}

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

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 ;) 

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

Esta me la apunto!

Gracias mago del frontend :) 

raulmoron Raul 07/02/2011 a las 11:39

@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! :-)

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...

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

Vladimir Vladimir 28/03/2012 a las 20:22

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!!!

bere bere 16/04/2012 a las 22:12

pero esto no funciona en opera!!!

Juan Juan 20/06/2012 a las 21:34

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

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

BUen aporte tenia tiempo buscando algo asi .. me sirvio muchisimo .. Graciasss .
Efrain Efrain 24/10/2012 a las 16:26
hola quisiera desabilitar esa funcion no quiero que me aparezca esa ventana de abandonar o permanecer como puedo hacer
aurora aurora 30/04/2013 a las 18:21
Excelente! Funciona excelente.
pabloe9k pabloe9k 21/05/2013 a las 16:05
Me sirvió de mucho la funcion OnUnLoad no me sirvio en Chrome pero con esta me va de perlas.. muchas gracias!!!
Omar Omar 25/09/2013 a las 00:46
Muy curioso, no lo conocía, lo he probado y me ha funcionado a la perfección. Muchas gracias.
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.
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
rafael castro rafael castro 22/01/2014 a las 00:10


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.
Marco Marco 25/03/2014 a las 19:08
Excelente!
Brian Brian 25/06/2014 a las 06:21
Un buen POST. No conocía esta función. Agregaremos a nuestro knowledgebase particular. :-)

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

Identifícate en OboLog, o crea tu blog gratis si aún no estás registrado.

Avatar de usuario Tu nombre