javascript - funciona - onbeforeunload para que sirve

window.onbeforeunload: solo muestra advertencia cuando no se envía el formulario

Question

Esta pregunta ya tiene una respuesta aquí:

• ¿Cómo deshabilitar la acción antes de descargar cuando el usuario está enviando un formulario? 5 respuestas

Estoy usando window.onbeforeload para evitar que el usuario se aleje después de cambiar los valores en un formulario. Esto está funcionando bien, excepto que también muestra la advertencia cuando el usuario envía el formulario (no deseado).

¿Cómo puedo hacer esto sin mostrar la advertencia cuando se envía el formulario?

Código actual:

var formHasChanged = false;

$(document).on(''change'', ''form.confirm-navigation-form input, form.confirm-navigation-form select, form.confirm-navigation-form textarea'', function (e) {
    formHasChanged = true;
});

$(document).ready(function () {
    window.onbeforeunload = function (e) {
        if (formHasChanged) {
            var message = "You have not saved your changes.", e = e || window.event;
            if (e) {
                e.returnValue = message;
            }
            return message;
        }
    }
});

Answer 1

Estaba buscando una mejor solución para esto. Lo que queremos es simplemente excluir uno o más desencadenantes de la creación de nuestro "¿Estás seguro?" caja de diálogo. Por lo tanto, no deberíamos crear más y más soluciones para cada vez más efectos secundarios. ¿Qué sucede si el formulario se envía sin un click evento del botón enviar? ¿Qué isDirty si nuestro controlador de isDirty elimina el estado isDirty pero luego el formulario-submit se bloquea después? Claro que podemos cambiar el comportamiento de nuestros activadores, pero el lugar correcto sería la lógica que maneja el diálogo. La vinculación al evento de submit del submit lugar del enlace al evento de click del botón de envío es una ventaja de las respuestas en este hilo por encima de algunas otras que vi antes, pero este IMHO simplemente corrige el enfoque incorrecto.

Después de investigar el objeto de evento del evento onbeforeunload , encontré la propiedad .target.activeElement , que contiene el elemento, que activó el evento originalmente. Así que, yay, es el botón o enlace o lo que sea que hayamos hecho clic (o nada en absoluto, si el propio navegador se ha alejado). Nuestro "¿Estás seguro?" La lógica de diálogo luego se reduce a los siguientes dos componentes:

1. El manejo de la forma isDirty :

   $(''form.pleaseSave'').on(''change'', function() {
     $(this).addClass(''isDirty'');
   });

2. El "¿Estás seguro?" lógica de diálogo:

   $(window).on(''beforeunload'', function(event) {
     // if form is dirty and trigger doesn''t have a ignorePleaseSave class
     if ($(''form.pleaseSave'').hasClass(''isDirty'')
         && !$(event.target.activeElement).hasClass(''ignorePleaseSave'')) {
       return "Are you sure?"
     }
     // special hint: returning nothing doesn''t summon a dialog box
   });

Es así de simple. No hay soluciones necesarias. Simplemente ignorePleaseSave los activadores (botones de envío y otros botones de acción) una clase ignorePleaseSave y la forma en que queremos que el diálogo se aplique a una clase pleaseSave . Todas las otras razones para descargar la página, a continuación, convoca nuestro "¿Está seguro?" diálogo.

PD: Estoy usando jQuery aquí, pero creo que la propiedad .target.activeElement también está disponible en JavaScript plano.

Answer 2

Puede manejar el evento submit() , que se producirá solo para el envío de su formulario.

Dentro de ese evento, establezca su variable de formHasChanged en falso para permitir que la descarga continúe. Además, solo es una sugerencia, pero dado que el propósito de esa variable de marca habrá cambiado, por lo que es posible que desee cambiarle el nombre a algo como ''warnBeforeUnload''

$(document).submit(function(){
    warnBeforeUnload = false;
});

Answer 3

Usar el evento de envío del formulario para establecer una marca podría funcionar para usted.

 var formHasChanged = false;
 var submitted = false;

$(document).on(''change'', ''form.confirm-navigation-form input, form.confirm-navigation-form select, form.confirm-navigation-form textarea'', function (e) {
    formHasChanged = true;
});

$(document).ready(function () {
    window.onbeforeunload = function (e) {
        if (formHasChanged && !submitted) {
            var message = "You have not saved your changes.", e = e || window.event;
            if (e) {
                e.returnValue = message;
            }
            return message;
        }
    }
 $("form").submit(function() {
     submitted = true;
     });
});

Answer 4

podría usar .on () para enlazar antes de descargar y luego usar .off () para desvincularlo en el envío del formulario

$(document).ready(function () {
    // Warning
    $(window).on(''beforeunload'', function(){
        return "Any changes will be lost";
    });

    // Form Submit
    $(document).on("submit", "form", function(event){
        // disable warning
        $(window).off(''beforeunload'');
    });
}