Veremos como emplear el evento beforeunload de JavaScript para ejecutar un evento y mostrar un mensaje cuando el usuario intenta abandonar nuestra página web.

Muchas veces nos hemos preguntado si es posible mostrar una ventana o alerta de confirmación cuando un usuario esta abandonando nuestra página, esto es particularmente útil en diversas situaciones en donde el usuario está descargando o cargando algun documento en la página y es imprecindible que el usuario no cierre la página, es decir, mantenga la sesión hasta que la operación termine, y en estos casos, podemos mostrar un mensaje de confirmación, esto lo podemos implementar fácilmente mediante el evento beforeunload de JavaScript que se ejecuta al momento de que el usuario intente cerrar la ventana de nuestra aplicación.

El evento beforeunload se ejecuta justamente cuando el usaurio intenta abandonar la página, es decir, cierra la ventana del navegador o la pestaña, en estos casos,, podemos mostrar un mensaje de confirmación para preguntar si el usuario está completamente seguro de que quiere abandonar nuestra aplicación, aunque, es una herramienta que se debe de emplear con cuidado para evitar molestar al usuairo con popups o mensajes emergentes.

Funcionamiento

Su uso es muy encillo, simplemenente debemos de asignar algun valor a la propeidad returnValue, usualmente es simplemente un texto y este texto se mostrará cuando el usuario intente cerrar la página, si no se establece un valor, el evento ocurre, pero, no se muestra ninguna alerta o notificación al usuario de que esta a punto de cerrar la página.

Aquí puedes ver un ejemplo de su uso:

window.addEventListener("beforeunload", function (event) {
 event.returnValue = "Are you sure you want to go out?"; 
});

window.onbeforeunload = function (e) {
    e = e || window.event;

    // For IE and Firefox prior to version 4
    if (e) {
        e.returnValue = 'Are you sure you want to go out?';
    }

    // For Safari
    return 'Are you sure you want to go out?';
};