Question

我有一个页面，不允许用户通过单击浏览器刷新按钮或按F5刷新页面。所以我想模拟'form resubmission'以显示提示信息。

有人可以指导我实施它的方法吗？

是否有可用的跨浏览器解决方案？

Answer 1

要在不收到提示的情况下刷新，必须使用HTTP GET

获取页面

使表单具有method="GET"而不是method="POST"（并修复服务器进程以适应此更改）

或者在会话中缓存帖子数据，并在表单提交后立即使用HTTP代码303重定向到显示页面。

如果要引发提示，请将用户带到页面的链接转换为POST表单上的提交按钮。如果用户使用GET请求到达，则向他们提供具有javascript的页面，该页面提交将请求转换为POST请求的表单。

Answer 2

您想要的是监听beforeunload事件并抛出确认框。

编辑：您已在其他答案that you need to support Mobile Safari的评论中说明了（不支持beforeunload。您可以尝试使用jquery.AreYouSure这样的库

Per the discussion on this page，它支持Mobile Safari，虽然我自己没有使用它

请注意，某些浏览器会忽略您在confirm调用中提供的文字，而是显示其默认文字。有更深入的方法来解决这个问题，但这会提示对话框。

$(window).on("beforeunload", function() { 

      return confirm("Do you really want to close?"); 
});

Answer 3

你是如何设法禁用所有内容的？

对于浏览器按钮，cross-compatible per MDN：

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

对于击键：

window.addEventListener("keyup", checkForRefresh, false);

var checkForRefresh = function(event) {
   if (event.keyCode == 116) {
        alert("Data will be lost if you refresh the page. Are you sure?");
   }
};

按键可能需要IE8的polyfill，但它们在docs中提供。

Answer 4

来自其他讨论：

人们过去常常采用两种方法：

方法1：使用AJAX + Redirect   这样，您可以使用JQuery或类似于Page2的方式在后台发布表单，同时用户仍会看到显示的page1。成功发布后，您将浏览器重定向到Page2。

方法2：发布+重定向到自己

这是论坛上的常用技巧。 Page1上的表单将数据发布到Page2，Page2处理数据并执行需要完成的操作，然后对自身执行HTTP重定向。这样最后的行动＆＃34;浏览器记得在第2页上是一个简单的GET，因此表格不会在F5上重新提交。

您可以参考以下答案：https://stackoverflow.com/a/3968038/1853444

用户尝试刷新浏览器时如何获取“确认表单重新提交”

4 个答案: