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

Question

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

当浏览器的刷新按钮以跨浏览器兼容的方式单击时,如何显示此类警报框？

Answer 1

你可以这样做:

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

这将向用户显示允许他们取消的提示.这不是特定的刷新,但是出于你的目的(比如在SO上编辑一个问题)这似乎并不重要,无论你要离开的地方都会丢失信息.

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

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请求而不是a 来完成GET.