เหตุการณ์การออกจากหน้าสกัดกั้น

เมื่อแก้ไขเพจในระบบของฉันผู้ใช้อาจตัดสินใจนำทางไปยังเว็บไซต์อื่นและการทำเช่นนั้นอาจสูญเสียการแก้ไขทั้งหมดที่ไม่ได้บันทึกไว้

ฉันต้องการสกัดกั้นความพยายามที่จะไปที่หน้าอื่นและแจ้งให้ผู้ใช้แน่ใจว่าต้องการให้สิ่งนี้เกิดขึ้นเนื่องจากอาจสูญเสียงานปัจจุบัน

Gmail ทำในลักษณะที่คล้ายกันมาก ตัวอย่างเช่นเขียนอีเมลใหม่เริ่มพิมพ์ลงในเนื้อหาข้อความและป้อนตำแหน่งใหม่ในแถบที่อยู่ (พูดว่า twitter.com หรืออะไรก็ได้) มันจะถามว่า "แน่ใจหรือ"

แนวคิดวิธีการจำลองสิ่งนี้? ฉันกำหนดเป้าหมาย IE8 แต่ต้องการใช้งานร่วมกับ FF & Chrome ด้วย

คล้ายกับคำตอบของ Ghommey แต่ยังรองรับ IE และ 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;
};

ดูบทความนี้ คุณสมบัติที่คุณกำลังมองหาคือ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>

แทนที่จะเป็นป๊อปอัปการยืนยันที่น่ารำคาญมันเป็นการดีที่จะชะลอการทิ้งไว้เพียงเล็กน้อย (เรื่องของมิลลิวินาที) เพื่อจัดการการโพสต์ข้อมูลที่ไม่ได้บันทึกไปยังเซิร์ฟเวอร์ได้สำเร็จซึ่งฉันจัดการสำหรับไซต์ของฉันโดยใช้การเขียนข้อความจำลองลงในคอนโซลดังนี้:

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

แก้ไข: ดูSynchronous_AJAXและวิธีดำเนินการกับjquery

ฉันมีผู้ใช้ที่ไม่ได้กรอกข้อมูลที่จำเป็นทั้งหมด

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