Evento de salida de página de interceptación

Question

Al editar una página en mi sistema, un usuario puede decidir navegar a otro sitio web y al hacerlo podría perder todas las ediciones que no haya guardado.

Me gustaría interceptar cualquier intento de ir a otra página y solicitar al usuario que se asegure de que esto ocurra, ya que podrían perder su trabajo actual.

Gmail hace esto de una manera muy similar. Por ejemplo, redacte un nuevo correo electrónico, comience a escribir en el cuerpo del mensaje e ingrese una nueva ubicación en la barra de direcciones (digamos twitter.com o algo así). Le preguntará "¿Estás seguro?"

Ideas para replicar esto? Me estoy dirigiendo a IE8, pero me gustaría ser compatible con FF & Chrome también.

Answer 1

Similar a la respuesta de Ghommey, pero esto también es compatible con las versiones antiguas de IE y Firefox.

window.onbeforeunload = function (e) { 
    var message = "Your confirmation message goes here.", 
    e = e || window.event; 
    // For IE and Firefox 
    if (e) { 
    e.returnValue = message; 
    } 

    // For Safari 
    return message; 
}; 

Answer 2

Ver este artículo. La función que está buscando es el código de ejemplo onbeforeunload

:

<script language="JavaScript"> 
    window.onbeforeunload = confirmExit; 
    function confirmExit() 
    { 
    return "You have attempted to leave this page. If you have made any changes to the fields without clicking the Save button, your changes will be lost. Are you sure you want to exit this page?"; 
    } 
</script> 

Answer 3

En lugar de una ventana emergente de confirmación molesto, que sería bueno para retraso dejando sólo un poco (cuestión de milisegundos) para gestionar con éxito la publicación de los datos no guardados en el servidor, lo que he conseguido para un sitio web mediante la escritura el texto de relleno a la consola de la siguiente manera:

window.onbeforeunload=function(e){ 
    // only take action (iterate) if my SCHEDULED_REQUEST object contains data   
    for (var key in SCHEDULED_REQUEST){ 
    postRequest(SCHEDULED_REQUEST); // post and empty SCHEDULED_REQUEST object 
    for (var i=0;i<1000;i++){ 
     // do something unnoticable but time consuming like writing a lot to console 
     console.log('buying some time to finish saving data'); 
    }; 
    break; 
    }; 
}; // no return string --> user will leave as normal but data is send to server 

Editar: Véase también Synchronous_AJAX y cómo hacerlo con jquery

Answer 4

Tengo usuarios que no han completado todos los datos requeridos.

<cfset unloadCheck=0>//a ColdFusion precheck in my page generation to see if unload check is needed 
var erMsg=""; 
$(document).ready(function(){ 
<cfif q.myData eq ""> 
    <cfset unloadCheck=1> 
    $("#myInput").change(function(){ 
     verify(); //function elsewhere that checks all fields and populates erMsg with error messages for any fail(s) 
     if(erMsg=="") window.onbeforeunload = null; //all OK so let them pass 
     else window.onbeforeunload = confirmExit(); //borrowed from Jantimon above; 
    }); 
}); 
<cfif unloadCheck><!--- if any are outstanding, set the error message and the unload alert ---> 
    verify(); 
    window.onbeforeunload = confirmExit; 
    function confirmExit() {return "Data is incomplete for this Case:"+erMsg;} 
</cfif>