Sự kiện thoát trang chặn

Khi chỉnh sửa một trang trong hệ thống của tôi, người dùng có thể quyết định điều hướng đến một trang web khác và làm như vậy có thể mất tất cả các chỉnh sửa mà họ chưa lưu.

Tôi muốn ngăn chặn mọi nỗ lực truy cập trang khác và nhắc người dùng chắc chắn rằng họ muốn điều này xảy ra vì họ có thể bị mất công việc hiện tại.

Gmail thực hiện điều này theo cách tương tự. Ví dụ: soạn một email mới, bắt đầu nhập vào nội dung thư và nhập một vị trí mới vào thanh địa chỉ (giả sử twitter.com hoặc một cái gì đó). Nó sẽ nhắc bạn hỏi "Bạn có chắc không?"

Ý tưởng làm thế nào để nhân rộng điều này? Tôi đang nhắm mục tiêu IE8, nhưng cũng muốn tương thích với FF & Chrome.

Tương tự như câu trả lời của Ghommey, nhưng điều này cũng hỗ trợ các phiên bản cũ của IE và 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;
};

Xem bài viết này. Tính năng bạn đang tìm kiếm là onbeforeunload

mã mẫu:

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

Thay vì một cửa sổ bật lên xác nhận gây phiền nhiễu, sẽ rất tuyệt nếu bạn chỉ cần hoãn lại một chút (vấn đề mili giây) để quản lý việc đăng thành công dữ liệu chưa lưu lên máy chủ mà tôi đã quản lý cho trang web của mình bằng cách viết văn bản giả vào bảng điều khiển như sau:

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

Chỉnh sửa: Xem thêm Synchronous_AJAX và cách thực hiện điều đó với jquery

Tôi có những người dùng chưa hoàn thành tất cả dữ liệu bắt buộc.

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