Question

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

当浏览器的刷新按钮以跨浏览器兼容的方式点击时，如何显示此类型的警告框？

Answer 1

你可以这样做：

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

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

Answer 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来完成。

Answer 3

这有两种可能的方法，两者都有很大不同。

一种方法是将事件处理程序绑定到onbeforeunload事件，以便您可以检测用户何时从当前页面浏览。但是，如果我的记忆正确地为我服务，onbeforeunload在浏览器中并不一致（我不认为Opera会对它做出响应IIRC，但目前无法进行测试）。当然，如果用户关闭JavaScript，此解决方案将失败。

第二种更强大的方法是实施 Post Redirect Get pattern ，在使用时，可防止用户刷新页面时再次发布数据。

Answer 4

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

参见例如关于onbeforeunload的this question

尽管对数据库进行重复检查可能会更好。这也会使用“后退”按钮捕获意外提交。

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

Answer 5

所有答案都已经很老了，根据HTML规范，到2020年今天，您可以采用这种方式。

重要说明：大多数浏览器现在不支持自定义文本。（较早的浏览器支持）。

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 = '';
});

Answer 6

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

<块引用>

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

<块引用>

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

Answer 7

你可以使用jquery ... 为此你必须附上jquery的js文件。

<script>
var count=0;
$(document).ready(function(){
    alert("hi" + (count++));
    confirm("sure?")
});
</script>

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

7 个答案: