防止使用后退按钮（在 IE 中）答案

【问题标题】：Prevent Use of the Back Button (in IE)防止使用后退按钮（在 IE 中）
【发布时间】：2010-09-08 10:42:37
【问题描述】：

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

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

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

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

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

【问题讨论】：

4GuysFromRolla 对“禁用后退按钮”进行了彻底检查。 4guysfromrolla.com/webtech/111500-1.shtml> 我建议你阅读那篇文章，他们还会告诉你为什么它不起作用（在所有情况下）。
+1 表示对有时不得不使用 DTWT 表示同情。

标签： javascript internet-explorer back-button

【解决方案1】：

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

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

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

在您的具体情况下，我认为最好的办法是向页面添加一个卸载事件，如果用户尚未填写表单，则该事件会警告用户。后退按钮不会受到影响，并且会警告用户他们的操作。

【讨论】：

基思是正确的。之前引用的 4 Guys 文章甚至以这样的结尾：“经过我的详尽搜索，我发现仍然没有办法真正禁用所有情况下的后退按钮。”嗬！我不需要读两篇文章就能读完最后一篇！
同意基思。在我的工作中，我们也经历过大致相同的情况，经过很长时间我们意识到，将应用程序重构为不需要禁用后退按钮会更容易。
当我按下后退按钮时，网站出现“页面不再有效”错误，我不认为这是意外，我意识到我做错了，我想大多数用户会没关系。你为试图改写历史而感到内疚。
@StuartDobson - 是的，这是标准的做法。用户仍然可以返回并继续返回，只是他们的浏览器不会重新加载页面。

【解决方案2】：

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

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

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

当然，用户会抱怨，但他们是存在这个被上帝抛弃的要求的原因，对吧？

【讨论】：

【解决方案3】：

我以前见过这个：

window.onBack = history.forward();

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

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

【讨论】：

你的代码会破坏这个“要求”吗？ “由于重复发布信息，我不能让它返回上一页然后移动到当前页面。我只能让它不直接离开当前页面”
我以前使用过一个网络应用程序，这是有史以来最令人沮丧的事情之一。
同意，我讨厌这样做的网站——我认为它破坏了网络。我也没有参与使用这种特殊技术的项目的需求:)
示例代码没有意义。它创建一个名为“onBack”的新全局变量并为其分配“未定义”，因为 history.forward() 没有返回值。这个想法可能是window.onback = history.forward;，（当onback 事件触发时调用window.forward - 这是行不通的，因为没有onback 事件）。该代码仍然可以作为对history.forward() 的调用，它将用户返回到他在单击返回按钮之前所在的页面...
否则，我同意这是个坏主意 ;-)

【解决方案4】：

我想出了一个小技巧，可以使用 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>

【讨论】：

在IE9中，它会导致页面滚动到顶部并且不会让我滚动页面

【解决方案5】：

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

【讨论】：

【解决方案6】：

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

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

【讨论】：

【解决方案7】：

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

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

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

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

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

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

【讨论】：

【解决方案8】：

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

那么他们可能也足够聪明，可以在 cmets 字段中输入 'no comment'。

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

【讨论】：

这也只是一些糟糕代码的尖叫。为什么人们可以通过单击后退按钮绕过评论？破解用户浏览器并不能解决错误代码。

【解决方案9】：

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

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

【讨论】：

我完全同意你的观点，但有人告诉我这是我坚持的。
你不会被它困住——你不能。这不是一个可行、有效或合乎道德的解决方案。修复代码

【解决方案10】：

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

【讨论】：

【解决方案11】：

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

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

祝你好运。

【讨论】：

【解决方案12】：

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

【讨论】：

【解决方案13】：

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

page1.html：用户点击一个链接到page2.html

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

page3.html：用户点击后退按钮并转到page1.html

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

【讨论】：

【解决方案14】：

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

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

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

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

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

【讨论】：

【解决方案15】：

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

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

【讨论】：

这可能在 2008 年的 Internet Explorer 中不起作用：D