当浏览器的刷新按钮被点击时，如何弹出警示框？

Question

如果用户刷新页面，它将向数据库添加另一条记录，因此我想通过警告框提醒用户是否真的要刷新页面，如果他们点击确定，则应该刷新页面，否则如果他们点击取消，它将不会。

如何使这种类型的警告框在浏览器的刷新按钮被点击时以跨浏览器兼容的方式出现？

- Faber

---

https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload - Sathvik

Answer 1

你可以这样做：

window.onbeforeunload = function() {
  return "Data will be lost if you leave the page, are you sure?";
};

这将向用户显示一个提示，让他们可以取消操作。这不是特定于刷新的，但对于您的目的（比如在stackoverflow上编辑问题），似乎并不重要，无论您离开到哪里，都会丢失信息。

- Nick Craver

---

不过，您的消息“如果您离开该页面，数据将丢失，是否确定？” 显示在警告框中的另一条消息下面：“您确定要离开此页面吗？” 在这之下还有消息“按继续导航以离开或按取消留在当前页面”。 是否有任何方法也可以定制这两个其他消息？ - Faber

@Faber - 据我所知没有...这是一个因浏览器而异的事情，onbeforeunload事件非常不标准。 - Nick Craver

我只是在猜测，但是通过使用JS检查下一个页面的URL是否与当前页面的URL匹配，能否检测到页面刷新？因为现在，即使用户点击主页或其他不会向数据库添加另一个条目的页面，它仍然会弹出该消息。 - Faber

@Faber - 没有一种通用的方式能够查看你要访问的URL... 如果有一种方法，那么网站就可以看到你离开它们时去了哪里，比如当你在地址栏中输入一个新的站点... 你可以看到这很快就会成为一个隐私问题，而你不想暴露给脚本网站可以运行的内容。 - Nick Craver

@NickCraver 我们能够自定义它吗？如果我们点击是，那么表单将会被提交，例如：document.forms["myForm"].submit(); 如果点击否，则停留在当前页面... 请给我建议。链接：http://stackoverflow.com/questions/34767942/how-can-i-restrict-page-loading-on-reload-option-browser - user4022749

在Chrome中单击刷新图标时，它不起作用... :( - Shurvir Mori

Answer 2

所有答案都比较旧，截止到今天2020年，根据HTML规范，您可以这样做。

重要提示：自定义文本现在在大多数浏览器中都不受支持（它在旧版浏览器中受支持）。

https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload

window.addEventListener('beforeunload', function (e) {
  // Cancel the event
  e.preventDefault(); // If you prevent default behavior in Mozilla Firefox prompt will always be shown
  // Chrome requires returnValue to be set
  e.returnValue = '';
});

- prabhatojha

---

是的，被接受的答案在普通刷新时不起作用，只有在清除缓存键组合时才起作用，但是您的答案可以在普通刷新时起作用。 - Firdous bhat

Answer 3

没有一种方法可以将它与刷新操作联系起来，但您可能需要研究 window.onbeforeunload。这将允许您在页面卸载之前运行一个返回字符串的函数。如果此字符串不为空，则会弹出确认对话框，其中包含来自浏览器的此字符串和其他样板文本。

例如：

window.onbeforeunload = function () {
    if (someConditionThatIndicatesIShouldConfirm) {
        return "If you reload this page, your previous action will be repeated";
    } else {
        //Don't return anything
    }
}

同时，如果当前页面是通过 POST 操作加载的，则当用户尝试刷新它时，浏览器应该已经显示了确认框。一般来说，任何改变服务器上数据状态的操作都应该通过 POST 请求完成，而不是 GET。

- pkaeding

---

这个行为对我来说有效 - 当我省略了 return "" 时 - 似乎返回任何字符串都会导致提示。 - stackdump

是的，如果您希望删除提示，请不要返回任何内容。 - Pierre

Answer 4

有两种可能的方法可以解决这个问题，它们都非常不同。

一种方法是将事件处理程序绑定到onbeforeunload事件上，以便您可以检测用户是否从当前页面中浏览离开。然而，如果我记得正确的话，onbeforeunload在各种浏览器中并不一致（我认为Opera不响应它，但目前没有办法测试）。当然，如果用户关闭JavaScript，这个解决方案就会失败。

第二种更健壮的方法是实现Post Redirect Get pattern，当使用它时，可以防止用户刷新页面时再次提交数据。

- Russ Cam

Answer 5

这是不可能的。你能做的最好的办法是使用onbeforeunload事件，但它会在离开当前页面时触发任何事件。无法专门针对刷新按钮进行操作。

参见例如此问题关于onbeforeunload的内容

然而，更好的方法可能是在数据库中构建一个重复检查。这样可以捕捉到使用“返回”按钮的意外提交。

另一种选择是使用一个随机的一次性令牌嵌入到表单中。如果尝试使用相同的令牌进行两个操作，你可以停止它。

- Unicron

Answer 6

引用Mozilla官方网站这里的话，不再支持提供自定义消息。

当此事件返回（或将returnValue属性设置为）null或undefined以外的值时，将提示用户确认页面卸载。在旧版浏览器中，事件的返回值会显示在此对话框中。从Firefox 44、Chrome 51、Opera 38和Safari 9.1开始，将显示一个通用字符串，而不是返回的字符串。例如：

Firefox显示字符串“此页面正在请求您确认是否要离开-您输入的数据可能无法保存。”（参见bug 588292）。 Chrome显示字符串“您是否要离开此网站？您所做的更改可能无法保存。”（请参阅Chrome平台状态）。

- Yogesh Kumar Gupta