单击浏览器的刷新按钮时如何弹出警告框？答案

【问题标题】：How to pop up an alert box when the browser's refresh button is clicked?单击浏览器的刷新按钮时如何弹出警告框？
【发布时间】：2010-07-10 23:01:15
【问题描述】：

如果用户刷新有问题的页面，它将向数据库添加另一条记录，所以我想通过警告框警告用户如果他们真的想刷新页面并且如果他们点击确定那么页面应该被刷新否则，如果他们单击取消，则不会。

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

【问题讨论】：

developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/…

标签： javascript

【解决方案1】：

你可以这样做：

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

这将向用户显示一个提示，允许他们取消。它不是特定于刷新的，但出于您的目的（例如编辑关于 SO 的问题），这似乎并不重要，无论您要去哪里，它都会丢失信息。

【讨论】：

有一个问题，您的消息“如果您离开页面，数据将会丢失，您确定吗？”出现在警告框中的另一条消息下方：“您确定要离开此页面吗”，并且在其下方显示消息“按继续导航离开或取消以留在当前页面上”。有没有办法自定义这两条其他消息？
@Faber - 我不知道......这是每个浏览器的事情，会有所不同，onbeforeunload 事件是非常非标准的。
我也只是在这里推测，但是是否可以通过检查下一个转到的 url 是否与当前页面的 url 匹配来检测页面刷新，不知何故使用 js？因为现在如果他们用户点击主页或其他不会向数据库添加另一个条目的页面，它仍然会弹出该消息。
@Faber - 没有办法查看你要去的网址，而不是通用的方式......如果有办法，网站可以看到你要去哪里你要离开他们了，比如当你在地址栏中键入一个新网站时......你会看到这很快就变成了一个隐私问题，你不想暴露给脚本的东西可以运行。
@NickCraver 我们可以自定义它吗，如果我们点击是，那么表单将被提交 Ex- : document.forms["myForm"].submit();并且 onclick 没有它停留在同一页面上...请建议我链接：stackoverflow.com/questions/34767942/…

【解决方案2】：

没有办法将其与刷新操作联系起来，但您可能需要查看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。

【讨论】：

这种行为对我有用 - 当我遗漏了 return "" - 似乎返回任何字符串都会导致提示
是的，如果你想删除提示，不要返回任何东西

【解决方案3】：

所有的答案都很老了，截至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 = '';
});

【讨论】：

是的，接受的答案不适用于正常重新加载，仅适用于缓存清除键组合，但您的答案也适用于正常重新加载

【解决方案4】：

有两种可能的方法，两者都截然不同。

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

第二种也是更强大的方法是实现 Post Redirect Get pattern，当用户刷新页面时，它会阻止数据再次发布。

【讨论】：

【解决方案5】：

这是不可能的。您可以做的最好的事情是使用onbeforeunload 事件，但这会在离开当前页面的 any 事件上触发。无法专门针对刷新按钮。

参见例如this question onbeforeunload

在您的数据库中构建重复检查可能会更好。这也将捕获使用“返回”按钮的意外提交。

另一种方法是使用内置到表单中的随机一次性令牌。如果尝试使用相同的令牌进行两个操作，您将停止它。

【讨论】：

【解决方案6】：

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

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

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

【讨论】：