Abfangen des Seitenabbruchereignisses

Beim Bearbeiten einer Seite in meinem System kann ein Benutzer entscheiden, zu einer anderen Website zu navigieren, und dabei alle Änderungen verlieren, die er nicht gespeichert hat.

Ich möchte jeden Versuch abfangen, zu einer anderen Seite zu wechseln und den Benutzer aufzufordern, sicherzugehen, dass dies geschehen soll, da er möglicherweise seine aktuelle Arbeit verlieren könnte.

Google Mail tut dies auf sehr ähnliche Weise. Erstellen Sie beispielsweise eine neue E-Mail, geben Sie sie in den Nachrichtentext ein und geben Sie einen neuen Speicherort in die Adressleiste ein (z. B. twitter.com oder ähnliches). Sie werden gefragt, ob Sie sicher sind.

Ideen, wie man das repliziert? Ich ziele auf IE8 ab, möchte aber auch mit FF & Chrome kompatibel sein.

Ähnlich wie Ghommeys Antwort, unterstützt dies jedoch auch alte Versionen von IE und 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;
};

Siehe diesen Artikel. Die Funktion, nach der Sie suchen, ist das Onbeforeunload

Beispielcode:

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

Anstelle eines nervigen Bestätigungs-Popups wäre es schön, die Verzögerung ein wenig (innerhalb von Millisekunden) zu verzögern , um das erfolgreiche Posten der nicht gespeicherten Daten auf dem Server zu verwalten, den ich für meine Site verwaltet habe, indem ich Dummy-Text wie folgt auf die Konsole geschrieben habe:

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

Bearbeiten: Siehe auch Synchronous_AJAX und wie das mit jquery geht

Ich habe Benutzer, die nicht alle erforderlichen Daten ausgefüllt haben.

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