Por MDN antes de descargar

Este evento permite que una página web active un cuadro de diálogo de confirmación que le pregunta al usuario si realmente desea abandonar la página. Si el usuario confirma, el navegador navega a la nueva página, de lo contrario cancela la navegación.

Lo anterior implica que el evento es cancelable, pero...

Según la especificación, para mostrar el cuadro de diálogo de confirmación, un controlador de eventos debe llamar a preventDefault() en el evento.

E incluso entonces, si de hecho estás haciendo eso...

Para combatir las ventanas emergentes no deseadas, es posible que los navegadores no muestren las indicaciones creadas en los controladores de eventos beforeunload a menos que se haya interactuado con la página, o incluso es posible que no las muestren en absoluto.

Caso de uso adecuado

Sin embargo, a diferencia del evento de descarga, existe un caso de uso legítimo para el evento beforeunload: el escenario en el que el usuario ha ingresado datos no guardados que se perderán si se descarga la página.

Se recomienda que los desarrolladores escuchen antes de descargar solo en este escenario, y solo cuando realmente tengan cambios sin guardar, para minimizar el efecto en el rendimiento. Consulte la sección Ejemplos a continuación para ver un ejemplo de esto.

Consulte la guía API del ciclo de vida de la página para obtener más información sobre los problemas asociados con el evento beforeunload.

Ejemplo

En este ejemplo, una página escucha los cambios en una entrada de texto. Si el elemento contiene un valor, agrega un oyente para beforeunload. Si el elemento está vacío, elimina el oyente:

 const beforeUnloadListener = (event) => { event.preventDefault(); return event.returnValue = "Are you sure you want to exit?"; }; const nameInput = document.querySelector("#name"); nameInput.addEventListener("input", (event) => { if (event.target.value !== "") { addEventListener("beforeunload", beforeUnloadListener, {capture: true}); } else { removeEventListener("beforeunload", beforeUnloadListener, {capture: true}); } });