Estoy usando SweetAlert en todas mis páginas y quiero poder usar eso para preservar la consistencia del estilo en mi sitio cada vez que el usuario intenta salir de la página con cambios sin guardar.

El problema que tengo es que no puedo averiguar cómo evitar que el usuario se vaya sin usar la alerta predeterminada (controlada por navegador). El siguiente código muestra el cuadro de diálogo de alerta dulce durante una fracción de segundo antes de ir a la página en la que el usuario hizo clic. Solo quiero usar mi propio cuadro de diálogo en lugar del feo cuadro de diálogo de alerta controlado por el navegador, que es diferente en cada navegador.

Ya he leído este post que tiene 14 años. No puedo creer que sea 2022 y la respuesta siga siendo "no puedes". Tiene que haber una manera, ¿verdad?

Aquí está el código que estoy usando. El indicador recordIsDirty se maneja en otro lugar y funciona perfectamente.

 const allowPageUnload = function (event) { console.log("ok bye"); event.preventDefault(); delete event['returnValue']; } const rejectPageLeave = function (event) { console.log("the leave event was rejected"); event.preventDefault(); event.returnValue = undefined; } const confirmLeaveIfDirty = async function (event) { event.preventDefault(); if (recordIsDirty) { await Swal.fire({ icon: 'warning', title: "Unsaved Changes!", html: "You have unsaved changes. Are you sure you want to leave without saving? All changes will be lost.", showCancelButton: true, confirmButtonText: "Yes, Cancel Changes", cancelButtonText: "No, Stay Here" }).then((result) => { if (result.isConfirmed) { allowPageUnload(event); } else { rejectPageLeave(event) } }) } else { allowPageUnload(event); } } $(document).ready(function () { window.addEventListener('beforeunload', function (event) { confirmLeaveIfDirty(event); }); }