Mencegat acara keluar halaman

Saat mengedit halaman dalam sistem saya, pengguna mungkin memutuskan untuk menavigasi ke situs web lain dan dengan melakukannya dapat kehilangan semua hasil edit yang belum mereka simpan.

Saya ingin menghalangi upaya apa pun untuk membuka halaman lain dan meminta pengguna untuk memastikan bahwa mereka menginginkan hal ini terjadi karena mereka berpotensi kehilangan pekerjaan mereka saat ini.

Gmail melakukannya dengan cara yang sangat mirip. Misalnya, buat email baru, mulailah mengetik ke badan pesan dan masukkan lokasi baru di bilah alamat (katakan twitter.com atau sesuatu). Ini akan meminta "Apakah Anda yakin?"

Ide bagaimana mereplikasi ini? Saya menargetkan IE8, tetapi ingin kompatibel dengan FF & Chrome juga.

Mirip dengan jawaban Ghommey, tetapi ini juga mendukung versi lama IE dan 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;
};

Lihat artikel ini. Fitur yang Anda cari adalah onbeforeunload

Kode sampel:

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

Alih-alih munculan konfirmasi yang mengganggu, alangkah baiknya untuk menunda menyisakan sedikit (dalam hitungan milidetik) untuk mengelola dengan sukses memposting data yang belum disimpan ke server, yang saya kelola untuk situs saya menggunakan menulis teks tiruan ke konsol seperti ini:

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: Lihat juga Synchronous_AJAX dan bagaimana melakukannya dengan jquery

Saya memiliki pengguna yang belum melengkapi semua data yang diperlukan.

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