javascript - 防止使用后退按钮（在 IE 中）

Question

因此，我目前工作地点的中小企业想要尝试禁用某些页面的后退按钮。我们有一个页面，用户在其中进行一些选择并提交它们以进行处理。在某些情况下，他们必须在另一个页面上输入评论。

用户发现，如果他们提交信息并转到带有评论的页面然后点击返回按钮返回上一页，他们就不必输入评论。

我知道对此有几种不同的解决方案（其中许多比禁用后退按钮要优雅得多），但这就是我剩下的。是否可以通过更改后退按钮的行为来防止某人返回上一页。（就像提交 - > 返回错误排序的东西）。

由于重复发布信息，我无法让它返回上一页然后移动到当前页面。我只能让它不直接远离当前页面。我用谷歌搜索了它，但我只看到帖子说它总是会回到上一页。我希望有人有一些疯狂的 kung foo js 技能可以使这成为可能。

我知道每个人都说这是一个坏主意，我同意，但有时你只需要按照别人告诉你的去做。

score 41 · Accepted Answer

不要这样做，只是不要。这是糟糕的界面设计，并迫使用户的浏览器以他们不期望的方式运行。

我认为任何成功阻止我的后退按钮工作的脚本都是黑客攻击，我希望 IE 团队会为它发布安全修复程序。

后退按钮是他们程序界面的一部分，而不是您的网站。

在您的具体情况下，我认为最好的办法是在页面上添加一个卸载事件，如果用户没有完成表单，则警告用户。后退按钮不受影响，用户将被警告他们的操作。

score 5 · Accepted Answer

不，你注定要失败。即使您在其他浏览器中弹出页面并隐藏后退按钮，也总是有 Backspace 键。

营销人员和分析师类型的问题在于，他们中的一些人不了解网络无状态的基本概念。他们不明白页面完全、完全不知道浏览器在使用它，并且对浏览器的绝对控制完全超出了网页的能力。

阻止用户点击后退按钮的最佳方法是确保您的页面在他们按下后退时丢失所有数据，例如，评论页面是唯一可以保存数据的点，如果他们确实按下了后退按钮，他们必须重新做所有事情（按照 pragma: nocache 的思路思考）。

用户肯定会抱怨，但他们是这个被遗弃的要求存在的原因，对吧？

score 4 · Accepted Answer

我以前见过这个：

window.onBack = history.forward();

这绝对是一个肮脏的黑客，如果可能的话，我会尽量不禁用后退按钮。用户可能仍然可以很容易地绕过它。并且取决于缓存，不知道是否会处理服务器代码，或者是否会首先运行带有 JavaScript 的缓存页面。

所以，是的，使用风险自负:)

score 4 · Accepted Answer

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

<!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" >
<title>Untitled Page</title>
<script type = "text/javascript" >
function changeHashOnLoad() {
     window.location.href += "#";
     setTimeout("changeHashAgain()", "50"); 
}

function changeHashAgain() {
  window.location.href += "1";
}
// If you want to skip the auto-positioning at the top of browser window,you can add the below code:
window.location.hash=' ';
var storedHash = window.location.hash;
window.setInterval(function () {
    if (window.location.hash != storedHash) {
         window.location.hash = storedHash;
    }
}, 50);


</script>
</head>
<body onload="changeHashOnLoad(); ">
Try to hit the back button!
</body>
</html>

score 3 · Accepted Answer

您有权访问服务器端源代码吗？如果是这样，如果信息已经提交，您可以检查重定向到第二页的第一页（显然，您需要为此使用会话）。在以前的工作中，这就是我们处理多步申请（申请与接受申请一样）的方式。

score 2 · Accepted Answer

您能否将评论移至上一页并使其成为必填字段？

禁用后退按钮将不起作用。

score 2 · Accepted Answer

由于浏览器中 javascript 的安全隔离，您无法更改后退按钮的功能。

也许您可以在用户会话中存储一些指示需要评论的内容，并让用户尝试加载的应用程序中的任何页面重定向到评论页面？

如果用户在进入评论页面时关闭浏览器怎么办？

我知道你在这里没有选择，但因为他们要求的似乎是不可能的......

也许在用户输入评论之前，您不能认为该项目已完成。因此，您需要同时跟踪正在进行的项目和已完成的项目，并在 UI 中进行区分，但这可能是最可靠的方法。

或者只是将评论字段放在表单页面上？

score 2 · Accepted Answer

用户发现，如果他们提交信息并转到带有评论的页面然后点击返回按钮返回上一页，他们就不必输入评论。

然后他们可能也足够聪明，可以在评论字段中输入“无评论” 。

您可以尝试强迫人们添加评论，但您可能最终会得到糟糕的无法使用的软件，惹恼用户，并且仍然无法获得评论。这通常是退后一步并从用户的角度重新考虑您在做什么的好时机。

score 1 · Accepted Answer

1

您应该保护您的应用程序免受双重提交，而不是破坏用户界面来隐藏错误。

于 2008-11-16T15:35:08.763 回答

score 1 · Accepted Answer

禁用后退按钮似乎是一种“蛮力”方法。

另一种选择是您可以跳出没有命令按钮的模式对话框，引导用户完成工作流程，并在流程完成后关闭对话框。

score 0 · Accepted Answer

根本没有可靠的方法来做到这一点。您不能保证 100% 的时间可以阻止用户这样做。

考虑到这一点，是否值得采用极其奇特的解决方案来禁用“大部分”时间？那是你来决定的。

祝你好运。

score 0 · Accepted Answer

作为一个简单的解决方案：试试这个。在其中插入一个更新面板和一个按钮，并使用 javascript 隐藏它，然后在页面加载时按下它。是的，我知道它会导致您的页面在加载时重新发布，并且如果禁用 javascript 可能无法正常工作，但肯定会帮助您对后退按钮问题做出一半体面的响应。安迪

score 0 · Accepted Answer

您可以阻止他们返回上一页。location.replace()用新页面替换当前页面的历史条目，所以...

page1.html：用户点击指向 page2.html 的链接

page2.html：用户点击链接调用location.replace('page3.html');

page3.html：用户单击返回按钮并转到 page1.html

这可能不适合进行 POST，但您可以通过 AJAX 将数据发布到 Web 服务，然后调用 location.replace()

score 0 · Accepted Answer

如果您从头开始一个新的 Web 应用程序，或者您有足够的时间来重新设计您的应用程序，您可以使用 JavaScript 和 AJAX 来避免浏览器的历史记录、后退和前进功能。

在登录之前或之后立即在新窗口中打开您的应用程序。
如果您愿意，可以使用窗口选项隐藏导航栏（使用后退和前进按钮）。
对所有服务器请求使用 AJAX，而无需更改窗口的位置 URL。
使用简单的 Web API 获取数据并执行操作，并使用 JavaScript 呈现应用程序。
窗口的历史记录中只有一个 URL。
后退和前进按钮什么也不做。
该窗口可以在注销时自动关闭。
浏览器历史记录不会泄露任何信息，这有助于提高安全性。

这种技术回答了这个问题，但它在几个方面也与最佳实践相矛盾：

后退和前进按钮应按预期运行。
应用程序不应打开新的浏览器窗口。
一个应用程序应该在没有 JavaScript 的情况下仍然可以运行。

在使用此技术之前，请仔细考虑您的要求和您的用户。

score 0 · Accepted Answer

我没有看到这个解决方案：

function removeBack(){
	window.location.hash="nbb";
	window.location.hash="";
	window.onhashchange=function(){window.location.hash="";}
}

javascript - 防止使用后退按钮（在 IE 中）

15 回答 15

Related

Reference