Práctica recomendada para advertir al usuario de que perderán datos

Question

Tengo un sitio que usa mucho JavaScript (principalmente jQuery) y necesito una buena forma global para hacerle saber al usuario que perderán los cambios no guardados cuando se alejen de una página en particular.

Por el momento tengo un evento onchange colocado en las entradas y ajuste mi navegación principal en una función que mostrará la advertencia cuando haga clic.

Esto se siente muy torpe y no escala bien (navegación que no forma parte de la navegación principal tiene que ajustarse manualmente, lo que está lejos de ser ideal)

Answer 1

Tengo un evento onchange en mis entradas y establezco una variable isDirty en true cuando cambian.

Luego uso onbeforeunload evento para avisar al usuario de los cambios no guardados:

var isDirty = false; 

window.onbeforeunload = function (evt) { 
    if (isDirty) { 
     return 'If you continue your changes will not be saved.'; 
    } 
} 

Answer 2

Usted está buscando el evento onbeforeunload.

como

$(window).bind('beforeunload', function(){ 
    return "Are you really sure?"; 
}); 

orígenes:

window.onbeforeunload = function(){ 
    return "Are you really sure?"; 
}); 

Eso, por supuesto, es sólo el "método de prevención". Todavía necesita un poco de lógica para saber si hubo cambios en su sitio o no. Eso podría hacerse fácilmente usando un boolean por ejemplo. Además debe realizar una detección rápida como

if('onbeforeunload' in window){} 

Creo que todos los navegadores soportan el caso hoy en día, pero todavía hay navegador que no sabe ese evento. Entonces, si la condición anterior falla, aún puedes retroceder con gracia hacia otro lado.

Answer 3

Utilícelo en el evento de ventana on unload para ver cuándo va a cambiar la página. A continuación, solicite una alerta de caja de luz para advertir al usuario si se perderá la navegación de datos no guardados.