首页 / 知识

在浏览器上禁用“后退”按钮

2023-04-16 20:09:00

Disabling Back button on the browser

我正在编写一个应用程序，如果用户回击，它可能会重新发送相同的信息并弄乱数据的流向和完整性。如何为使用和不使用javascript的用户禁用它？

不幸的是，这是不可能的。但是，请考虑您的应用程序导航模型。您是否正在使用发布/重定向/获取PRG模型？ http://en.wikipedia.org/wiki/Post/Redirect/Get？

与回发模型相比，此模型对后退按钮更友好。

你不应该

您可以将一些脚本附加到页面的onbeforeunload事件中，然后与用户确认他们要执行的操作。并且您可以尝试进一步禁用它，但是当然这仅适用于启用了javascript的用户。而是着眼于重写应用程序，这样您就不必在每个页面提交时都提交事务，而仅在过程结束时提交事务。

我强烈敦促您竭尽全力，以防止折断后退按钮，这是疏远用户的可靠方法，甚至使它在1999年Jacob Neilsen的十大Web设计错误中名列第一。

也许您可以考虑问一个问题："如何避免破坏后退按钮以<在此处插入方案>？"

如果Scott的答案接近标准，请考虑将流程更改为PRG模型。如果还有其他问题，请提供更多详细信息，然后看看我们将如何提供帮助。

我想到了一个小技巧，可以使用JavaScript禁用后退按钮。我在chrome 10，firefox 3.6和IE9上进行了检查：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
Untitled Page
<script type ="text/javascript">
function changeHashOnLoad() {
window.location.href +="#";
setTimeout("changeHashAgain()","50");
}

function changeHashAgain() {
window.location.href +="1";
}

var storedHash = window.location.hash;
window.setInterval(function () {
if (window.location.hash != storedHash) {
window.location.hash = storedHash;
}
}, 50);

</head>
<body onloadx="changeHashOnLoad();">
Try to hit back!
</body>
</html>

最好的选择是不要依靠回发来控制流程，但是(如果您现在坚持)

您可以使用以下方式：

1
2
3
4

Response.Cache.SetCacheability(HttpCacheability.NoCache);
Response.Cache.SetExpires(Now.AddSeconds(-1));
Response.Cache.SetNoStore();
Response.AppendHeader("Pragma","no-cache");

很快，您会发现它不适用于所有浏览器，但是您可以在代码中引入一个检查，例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

if (Page.IsPostBack)
{
if (pageIsExpired()){
Response.Redirect("/Some_error_page.htm");
}
else {
var now = Now;
Session("TimeStamp") = now.ToString();
ViewState("TimeStamp") = now.ToString();
}

private boolean pageIsExpired()
{
if (Session("TimeStamp") == null || ViewState("TimeStamp") == null)
return false;

if (Session("TimeStamp") == ViewState("TimeStamp"))
return true;

return false;
}

这将在某种程度上解决问题，不检查代码-仅出于示例目的。

可以在所有主要浏览器中禁用"后退"按钮。它仅使用哈希值完全禁用后退按钮。
只需将这5行代码放在您的页面中

1
2
3

window.location.hash="no-back-button";
window.location.hash="Again-no-back-button";//for google chrome
window.onhashchange=function(){window.location.hash="no-back-button";}

详细说明

无论您想出什么来禁用后退按钮，都可能无法在以后的浏览器中停止后退按钮。

如果它在开发周期的后期，我建议您尝试上面的一些建议，但是当您有时间的时候，应该构建流程，以使"后退"按钮不会干扰您网站的逻辑，它只会将用户带回到上一页，例如他们期望这样做。

这是以前的帖子：
防止使用后退按钮(在IE中)

的确，应该添加适当的验证以确保重复数据不会使事情变得混乱。但是，就像我的情况一样，由于我在表单后使用了一些第三方API，因此我无法完全控制数据。所以我用这个