Evento beforeunload en JavaScript: mensaje de confirmación antes de cerrar la página

Muchas veces nos hemos preguntado si es posible mostrar una ventana de confirmación cuando un usuario está a punto de abandonar nuestra página. Es algo especialmente útil en situaciones donde el usuario está subiendo o descargando un archivo, rellenando un formulario largo o esperando que algún proceso crítico termine. En esos casos, necesitamos que el usuario se quede —o al menos que tome una decisión consciente antes de irse—. Para eso existe el evento beforeunload de JavaScript, que se dispara justo en el momento en que el usuario intenta cerrar la ventana o la pestaña del navegador.

El evento beforeunload se ejecuta exactamente cuando el usuario intenta abandonar la página, ya sea cerrando el navegador, la pestaña, o navegando a otra URL. En ese preciso instante podemos mostrar un diálogo de confirmación para preguntarle si está seguro de que quiere salir. Dicho esto, es una herramienta que hay que emplear con cuidado: usarla en exceso o fuera de contexto puede resultar molesto y perjudicar la experiencia del usuario.

La confirmación antes de cerrar una pestaña —también conocida como beforeunload dialog— es una pequeña alerta que aparece cuando el usuario intenta cerrar el navegador, la pestaña o recargar la página mientras ocurre algo importante. Es una herramienta sencilla pero efectiva: bien usada, puede evitar abandonos accidentales y procesos interrumpidos que se pierden sin remedio.

Regla de oro: si el usuario puede perder información al cerrar, ponle una ventana de confirmación.

Cuándo conviene usarlo y cuándo evitarlo

Conviene usar beforeunload cuando:

• El usuario está subiendo un archivo.
• Hay un proceso crítico ejecutándose (descargas, conversiones, generación de informes).
• Existe un formulario largo o costoso de rellenar que aún no se ha guardado.
• Se trata de contenido o progreso que el usuario podría perder accidentalmente.

No conviene usarlo cuando:

• Quieres retener al usuario de manera agresiva o manipuladora.
• Tu único objetivo es impedir que abandone tu web por razones de marketing (pésima idea: daña la confianza y el SEO a largo plazo).
• La acción del usuario no implica pérdida de datos ni consecuencias reales.

Restricciones y cambios recientes en los navegadores modernos

Este es probablemente el punto más importante que debes conocer antes de implementarlo: los navegadores modernos ya no permiten mensajes personalizados en el diálogo de beforeunload.

Es decir, aunque escribas un texto perfectamente redactado dentro de event.returnValue, Chrome, Firefox o Safari simplemente lo ignorarán y mostrarán un mensaje genérico controlado por el propio navegador. Esto fue una decisión deliberada para evitar que los sitios usaran mensajes engañosos o de alta presión para manipular al usuario. Así que no pierdas tiempo redactando el texto perfecto: no se mostrará.

Cómo funciona el evento beforeunload en JavaScript

Su uso es muy sencillo. Basta con registrar el evento sobre window y asignar algún valor a la propiedad event.returnValue dentro del manejador. Ese valor es lo que, en teoría, aparecería en el diálogo —aunque, como ya vimos, los navegadores modernos lo ignoran y muestran su propio texto genérico—. Si no asignas ningún valor, el evento ocurre igualmente, pero el navegador no interrumpe al usuario con ninguna alerta.

La forma moderna y recomendada es usar addEventListener:

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

Y la versión clásica con onbeforeunload, útil si necesitas compatibilidad con navegadores o entornos más antiguos:

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

    // Para IE y Firefox anteriores a la versión 4
    if (e) {
        e.returnValue = "Are you sure you want to go out?";
    }

    // Para Safari
    return "Are you sure you want to go out?";
};

Una buena práctica es activar el evento solo cuando sea necesario y eliminarlo cuando el proceso crítico haya terminado, usando removeEventListener. Así evitas que el diálogo aparezca cuando ya no tiene sentido.

Comportamiento según el navegador

• Chrome: ignora completamente el texto personalizado en event.returnValue y muestra únicamente su mensaje genérico.
• Firefox: comportamiento prácticamente idéntico a Chrome desde la versión 44+.
• Safari: tolera el return en algunos escenarios específicos, aunque su comportamiento puede variar entre versiones.
• Móvil (Android/iOS): el soporte es muy limitado o directamente inexistente; en la mayoría de los casos el evento se ignora por completo.

La clave está en no activarlo de forma permanente. Solo debería estar activo cuando el usuario se encuentra en un proceso importante cuya interrupción implique perder lo que estaba haciendo. Activarlo y desactivarlo dinámicamente es la manera correcta de hacerlo.

Alternativas más respetuosas para proteger el progreso del usuario

Si el contexto no justifica un beforeunload o quieres complementarlo, estas alternativas suelen resultar menos intrusivas y más agradables para el usuario:

• Barras de progreso visibles que comunican el estado del proceso en curso.
• Mensajes informativos dentro de la propia página que avisen de que hay cambios sin guardar.
• Auto-guardado de formularios para que el usuario nunca pierda lo que ha escrito.
• Confirmaciones internas (modales o dialogs propios) antes de que el usuario navegue a otra sección dentro de la misma aplicación.

En más de una ocasión he optado por estas alternativas en lugar de beforeunload, especialmente cuando el objetivo no era crítico o cuando quería que la experiencia se sintiera fluida en lugar de interrumpida.

Preguntas frecuentes

• ¿Chrome permite mensajes personalizados en el diálogo?
  • No. Desde hace varios años, Chrome ignora el contenido de event.returnValue y muestra únicamente su propio mensaje genérico.
• ¿Funciona en dispositivos móviles?
  • En la mayoría de navegadores móviles (Android e iOS), el soporte es casi nulo. No es algo en lo que debas apoyarte para proteger datos en entornos móviles.
• ¿Es legal usarlo?
  • Sí, siempre que no lo emplees para manipular o engañar al usuario. Usarlo para proteger datos reales está perfectamente justificado.
• ¿Cómo evitar abusar de él?
  • Actívalo únicamente durante interacciones que lo justifiquen realmente —como una carga de archivo en curso o un formulario con cambios sin guardar— y elimínalo con removeEventListener en cuanto el proceso termine.

Conclusión

El evento beforeunload es una herramienta pequeña pero poderosa. Bien empleada, evita pérdidas de progreso, errores inesperados y abandonos accidentales que el usuario después lamenta. En mi caso, me ha servido especialmente en mi blog y en mis páginas de cursos y libros, donde necesito que el usuario permanezca hasta que todo esté correctamente cargado o guardado.

El secreto es la moderación: activarlo solo cuando realmente aporta valor, entender sus limitaciones en navegadores modernos —que ignoran cualquier mensaje personalizado— y combinarlo con otras técnicas de UX como el auto-guardado o las barras de progreso cuando el contexto lo permita.