Javascript 截取页面退出事件

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

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

Gmail也是这样做的。例如，撰写一封新电子邮件，开始在邮件正文中键入内容，并在地址栏中输入一个新位置（例如twitter.com或其他内容）。它会提示你“你确定吗？”

如何复制这一点？我的目标是IE8，但也希望与FF&Chrome兼容。

参见本文。 您正在寻找的功能是

示例代码：

  <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=确认退出；
函数confirmExit（）
{
return“您试图离开此页面。如果您在未单击“保存”按钮的情况下对字段进行了任何更改，您所做的更改将丢失。是否确实要退出此页面？”；
}

与戈米的答案类似，但这也支持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;
};

---

与其弹出一个恼人的确认窗口，不如延迟一点（几毫秒），以便成功地将未保存的数据发布到服务器，我使用向控制台写入虚拟文本的方式为我的站点管理该服务器，如下所示：

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

window.onbeforeunload=函数（e）{
//仅当计划的_请求对象包含数据时才执行操作（迭代）
对于（计划的_请求中的var键）{
postRequest（计划的_请求）；//post和空的计划的_请求对象
对于（var i=0；i），用户将正常离开，但数据将发送到服务器

编辑：

---

另请参见以及如何使用

我有一些用户尚未完成所有必需的数据

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

//在我的页面生成中进行ColdFusion预检查，查看是否需要卸载检查
var erMsg=“”；
$（文档）.ready（函数（）{
$（“#myInput”）.change（函数（）{
verify（）；//用于检查所有字段并在erMsg中填充任何失败的错误消息的函数
if（erMsg==“”）window.onbeforeunload=null；//全部正常，让它们通过
else window.onbeforeunload=confirmExit（）；//从上面的Jantimon处借用；
});
});
验证（）；
window.onbeforeunload=确认退出；
函数confirmExit（）{return“对于这种情况，数据不完整：“+erMsg；}”

我喜欢这个弹出窗口的替代方案。谢谢你的建议，Remi。这完全没有意义-1.javascript没有线程化。你正在做的是做一个postRequest，然后暂停站点的计算，而不允许任何人做任何事情（包括您的postRequest，它在计算暂停之前就已经发送了）。这正是它工作的原因：确实，post请求是在计算暂停之前发送的，但是在页面实际离开之前对页面的这一小小的阻塞确保了浏览器客户端有足够的时间（而不是javascript）要真正正确地完成发送此请求。我注意到，当我只发送请求（不阻塞）并立即离开页面时，请求并不总是发送的。我不会在生产中使用它。console.log不是交叉浏览器；每个postRequest都会受到前一个请求的延迟（这也意味着页面将在循环*预定请求期间挂起）；请求不是并行启动的；您不能保证真正发送请求。如果我被迫面对这个问题，如果只有一个请求，我会使用同步ajax请求。对于多个请求，我会使用异步ajax请求和检查结果（成功或错误）的循环我不知道console.log不是跨浏览器的，a确实应该是首选的解决方案（对于单个请求）。所提到的

计划的\u请求

是一个对象，它累积应发送到服务器的任何非紧急信息，如数据缓冲区，有效地将多个请求连接到一个请求（当然，这些请求的url是相同的）。如您所说，卸载前使用同步Ajax请求可以解决跨浏览器问题。感谢您的宝贵意见！您能否解释第一行（var message=…）？我不知道逗号和第二个表达式在做什么。@mtmurdock这只是声明多个变量的Javascript语法。

var foo，bar；

与

var foo；

var bar；

@mtmurdock，第二个语句“var e=e | | window.event；”表示将e设置为等于参数e（如果是真的话）如果不是truthy，则为window.event。如果参数e为null，则为truthy。@Blieque addEventListener在IE8中不受支持。在没有阅读问题的情况下，不要编辑人们的答案。在Chrome中不再起作用（已弃用）：是否有任何方法可以识别用户选择了“离开此页面”选项而不是“留在此页面”？@ShilpaSoni您很快就会得到一个后续卸载事件，但我认为没有同步方式。