当用户尝试退出浏览器时显示弹出窗口（类似GMail）

Question

我需要在用户尝试关闭浏览器窗口时提示用户。例如，当您在进入GMail并开始撰写新邮件后，若您在保存任何内容之前尝试关闭页面，GMail将会弹出一个消息框，类似于：

您真的要退出此页面吗？

然后您可以选择离开页面或者停留在当前页面。所以我想知道他们是如何做到这一点，以及当用户点击“留在此页”时用了什么技巧（如果有的话）。

- Vladimir Li

---

我只想说，这可能会让一些用户感到烦恼。你真的需要这样做吗？难道不能在不这样做的情况下保存信息（在某个地方）吗？ - Mateen Ulhaq

请不要这样做。来自全球互联网用户的签名。 - theflowersoftime

Answer 1

为了避免用户烦恼，您可能希望状态能够根据操作是否正在运行而发生变化。可以像这样实现：

window.beforeunload = function(){
  if(isPerformingOperation) {
    return 'Are you sure you want to leave?';
  }
}

当您想提示用户时，请将isPerformingOperation设置为true，完成后将其关闭。

- Kautiontape

Answer 2

将一个函数绑定到onbeforeunload事件上。

window.onbeforeunload = function(){
  return 'Are you sure you want to leave?';
};

应该在所有浏览器中都能正常工作（已在IE 8、FF 3.6和Chrome 9中进行了测试）。

或者使用jQuery：

$(window).bind('beforeunload', function(){
  return 'Are you sure you want to leave?';
});

- gen_Eric