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

How to pop up an alert box when the browser's refresh button is clicked?

提问by Faber

If the user refreshes the page in question it will add another record to the database, so I want to warn the user through an alert box if they really want to refresh the page and if they click ok then the page should be refreshed otherwise if they click cancel it won't be.

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

How to make this type of alert box appear when the browser's refresh button is clicked in a way that is cross browser compatible?

当以跨浏览器兼容的方式单击浏览器的刷新按钮时，如何使这种类型的警报框出现？

回答by Nick Craver

You can do it like this:

你可以这样做：

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

This would show a prompt to the user allowing them to cancel. It's not refresh specific, but for your purposes (like editing a question on SO) that doesn't seem to matter, it's loss of info no matter where you're leaving to.

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

回答by pkaeding

There isn't a way to tie it to just the refresh action, but you may want to look into window.onbeforeunload. This will allow you to run a function that returns a string just before the page is unloaded. If this string is not empty, then a popup confirmation dialog, containing this string and some other boilerplate text provided from the browser.

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

For example:

例如：

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

Also, if the current page was loaded via a POSToperation, then the browser should already display a confirmation box when the user tries to refresh it. As a general rule, any action that changes the state of the data on the server should be done through a POSTrequest, rather than a GET.

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

回答by Russ Cam

There are two possible ways forward with this, both quite different.

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

One way would be to have an event handler bound to onbeforeunloadevent so that you can detect when the user is browsing awayfrom the current page. If my memory serves me correctly however, onbeforeunloadis not consistent across browsers (I don't think Opera responds to it IIRC, but have no way to currently test). Of course, this solution fails if the user turns off JavaScript.

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

The second and more robust way would be to implement the Post Redirect Get patternwhich when used, prevents the data from being posted again when a user refreshes the page.

第二种也是更可靠的方法是实现Post Redirect Get 模式，当使用该模式时，可以防止用户刷新页面时再次发布数据。

回答by Unicron

This is not possible. The best you can do is use the onbeforeunloadevent but that will fire on anyevent leaving the current page. It is not possible to target the refresh button specifically.

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

See e.g. this questionon onbeforeunload

参见例如onbeforeunload 上的这个问题

It might be better though to build a duplicate check into your database. That would catch accidental submissions using the "back" button as well.

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

An alternative would be using a random one-time token that gets built into the form. If two operations are attempted using the same token, you would stop it.

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

回答by Sanjay

you can use jquery for this... for this you have to attach js file of jquery.

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

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