Anónimo
onBeforeUnload: Cómo recordarle al usuario que grabe antes de cerrar una pagina
por Juanma Garrido
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
- ¿Te gustó el post? »
- Vótalo (63)
- Añádelo a tus favoritos
Comentarios sobre 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 ;)
Que buen post!
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 :)
@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
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!!!