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:

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

Post Anterior
Post Siguiente

Política de Comentarios de pixelovers

Responsable » Juan Manuel Garrido
Finalidad » Moderación de los comentarios
Legitimación » Tu consentimiento expreso que te será requerido por Disqus.
Destinatarios » Los datos de tus comentarios los guardará Disqus, mi sistema de comentarios, que está acogido al acuerdo de seguridad EU-US Privacy Shield tal y como recoge su politica de privacidad
Derechos » Desde Disqus, por tanto, podrás acceder, rectificar, limitar y suprimir tus comentarios o tu cuenta
Tienes más detalles acerca del tratamiento de los datos relacionados con los comentarios en nuestra (Política de Privacidad)

28 Comentarios

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

  2. @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! 🙂

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

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

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

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

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

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

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

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

  11. Tengo una pregunta si deseo diferenciar cuando realizo click en el boton de refresh del navegador como se haria?? Dada esa solucion si recargo la pagina igualmente me sale el mensaje de abandono de pagina. Alguna sugerencia? Es urgente. Muchas Gracias

  12. Consulta, como puedo interactuar con lo que decida el usuario?
    Si el usuario presiona que si quiere salir de la web yo podría guardar en una base de datos que el salió de la sesión. Y así controlar el tiempo que estuvo con la sesión abierta ya que para entrar al sistema él tiene que iniciar sesión y ya guardo la apertura.

    gracias

    • Con ajax.
      window.addEventListener(«beforeunload», function (e) {
      var nom_persona = window.sessionStorage.getItem(‘usuario’);
      $.ajax({
      type: «GET»,
      //callbackParameter:’callback’,
      dataType:’jsonp’,
      jsonp: ‘callback’,
      url:url’,
      data:»parametros
      });
      return;
      });

  13. Se llama tanto para el Aspa de la ventana, Alt+ F4, F5, Actualizar (reload), y también los postback (submit de formularios) y postback asíncronos (llamadas Ajax Request).

    Lo ideal sería discriminar los Postback y Postback Asíncronos.