Intercetta evento di uscita dalla pagina

Durante la modifica di una pagina all'interno del mio sistema, un utente potrebbe decidere di navigare in un altro sito Web e così facendo potrebbe perdere tutte le modifiche che non ha salvato.

Vorrei intercettare qualsiasi tentativo di passare a un'altra pagina e chiedere all'utente di assicurarsi che ciò accada poiché potrebbe potenzialmente perdere il lavoro corrente.

Gmail lo fa in un modo molto simile. Ad esempio, scrivi 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). Verrà chiesto di chiedere "Sei sicuro?"

Idee su come replicare questo? Sto prendendo di mira IE8, ma vorrei essere compatibile anche con FF e Chrome.

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

Vedi questo articolo. La funzione che stai cercando è onbeforeunload

codice di esempio:

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

Invece di un fastidioso popup di conferma, sarebbe bello ritardare lasciando solo un po '(questione di millisecondi) per gestire correttamente la pubblicazione dei dati non salvati sul server, che ho gestito per il mio sito utilizzando la scrittura di testo fittizio sulla 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

Modifica: vedi anche Synchronous_AJAX e come farlo con jquery

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>