Intercept evento pagina di uscita

Question

Quando si modifica una pagina all'interno del mio sistema, un utente potrebbe decidere di passare a un altro sito web e così facendo potrebbe perdere tutte le modifiche che non sono state salvate.

Vorrei intercettare qualsiasi tentativo di passare a un'altra pagina e richiede all'utente di essere sicuri che vogliono che questo accada in quanto potrebbero potenzialmente perdere il loro lavoro attuale.

Gmail lo fa in un modo molto simile. Ad esempio, componi una nuova email, inizia a digitare nel corpo del messaggio e inserisci una nuova posizione nella barra degli indirizzi (ad esempio twitter.com o qualcosa del genere). Richiederà di chiedere "Sei sicuro?"

idee su come replicare questo? Mi rivolgo a IE8, ma vorrei anche essere compatibile con FF & Chrome.

Answer 1

Simile alla risposta di Ghommey, ma supporta anche le vecchie versioni di IE e 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

consulta questo articolo. La funzionalità che stai cercando è il codice di esempio 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

Invece di un popup di conferma fastidioso, sarebbe bello per ritardo lasciando solo un po '(pochi millisecondi) per gestire con successo la pubblicazione dei dati non salvati al server, che sono riuscito per il mio sito utilizzando la scrittura testo fittizio alla console in questo modo:

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 

Edit: Vedi anche Synchronous_AJAX e come farlo con jquery

Answer 4

Ho utenti che non hanno completato tutti i dati richiesti.

<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>