拦截页面退出事件

在我的系统中编辑页面时，用户可能决定导航到另一个网站，这样做可能会丢失所有尚未保存的编辑内容。

我想拦截任何尝试转到另一个页面的尝试，并提示用户确保他们希望这样做，因为他们可能会丢失当前的工作。

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>