2010-07-10 66 views
18

如果用户刷新有问题的页面,它会向数据库添加另一条记录,所以我想通过一个警告框警告用户,如果他们真的想刷新页面,并且他们点击确定,那么页面应该刷新,否则如果他们点击取消它不会。如何在点击浏览器刷新按钮时弹出警告框?

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

回答

33

你可以这样说:

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

这将显示一个提示给用户,让他们取消。这不是特定的刷新,但为了您的目的(如编辑一个关于SO的问题),似乎并不重要,无论您在哪里,都会丢失信息。

+0

但有一个问题,你的信息“的数据都将丢失,如果你离开这个页面,你确定?”出现在警告框中的另一条消息下:“您确定要从此页面导航”,并在下面显示消息“按继续导航或取消保留在当前页面上”。有没有什么方法可以自定义这2个其他消息? – Faber 2010-07-10 23:20:53

+0

@Faber - 不是我所知道的......这是一个每个浏览器的事情都会有所不同,'onbeforeunload'事件非常*非标准。 – 2010-07-10 23:23:41

+0

此外,我只是在这里猜测,但它是可以检测页面刷新检查,看看是否接下来的url匹配当前页面的url,以某种方式与js?因为现在如果用户点击主页或其他一些不会向db添加条目的页面,它仍会弹出该消息。 – Faber 2010-07-10 23:23:54

7

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

例如:

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

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

+0

这种行为为我工作 - 当我离开了回报“” - 似乎返回任意字符串将导致提示 – stackdump 2017-08-08 16:13:51

1

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

参见例如this question上onbeforeunload

它可能会更好,但重建检查到您的数据库。这将使用“返回”按钮捕获意外提交。

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

2

有两种可能的解决方法,两者有很大不同。

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

第二和更健壮的方式是实施Post Redirect Get pattern其中当使用时,可以防止被张贴时再次用户刷新页面的数据。

+0

+ 1用于Post重定向获取 – Robert 2010-07-11 00:38:10

0

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

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

他问了关于刷新按钮 – ppaulojr 2013-09-28 15:15:29