拦截页面退出事件

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

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

Gmail以非常类似的方式执行此操作。 例如，撰写一封新邮件，开始在邮件正文中input内容，然后在地址栏中input一个新的位置（例如twitter.com或其他）。 它会提示问“你确定吗？”

想法如何复制这个？ 我的目标是IE8，但也想与FF＆Chrome兼容。

Answer 1

类似于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; }; 

Answer 2

看到这篇文章。 你正在寻找的function是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> 

Answer 3

而不是一个恼人的确认popup窗口，这将是很好的延迟留下一点点（毫秒的问题）pipe理成功张贴未保存的数据到服务器，我pipe理我的网站使用编写虚拟文本到控制台是这样的：

 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来做到这一点

Answer 4

我有没有完成所有必需数据的用户。

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