如何使浏览器后退按钮忽略主题标签？答案

【问题标题】：How to make the browser back button disregard hash tags?如何使浏览器后退按钮忽略主题标签？
【发布时间】：2012-02-03 14:02:29
【问题描述】：

我有一个网站，它使用哈希来打开/关闭当前页面上的一些选项卡和图层。使用散列的原因是，如果用户通过链接访问另一个页面，然后返回到原始页面，所有选项卡和图层应该完全按照离开该页面时的方式打开。

问题是，在第一页上并使用浏览器返回按钮时，只有哈希值发生变化，用户必须多次单击才能真正返回到最后一个“真实”页面。

这种行为可以改变吗？这是一个示例工作流程：

所以我正在访问一个页面：

start.php > 点击链接 > processing.php > 点击标签，哈希变化 >

processing.php#1 > 点击页面上的不同部分，哈希更改为 >

processing.php#1-2

现在当我点击浏览器返回按钮时，我想返回：

start.php不是processing.php#1

但是！当我从：

processing.php#1-2 > 导航到 > otherpage.php

然后从那里点击返回按钮，我需要返回：

processing.php#1-2

为了恢复打开的选项卡和图层。

这可能吗！？任何帮助表示赞赏！

【问题讨论】：

据我所知，这是不可能的。可能会做一些 hacky 哈希操作代码，在其中存储历史作为哈希更改，当浏览器返回时，它会触发一个事件以继续返回，直到它退出页面。这可能比它的价值更多。
我建议只运行你的 JS 事件而不生成新的哈希标签，因为你显然不再使用它们了。
我愿意。我需要它们从 example.php#1 到 other_page.php，然后返回到 example.php#1
查看历史方法developer.mozilla.org/en/DOM/window.history

标签： javascript jquery hash

【解决方案1】：

据我所知，如果没有 JavaScript，你无法解决这个问题。片段是 URL 的一部分，当它发生变化时，新的 URL 会被添加到历史记录中。

如果您想更改 URL 而不创建历史记录条目，我建议您使用 location.replace()。不要设置window.location.hash，试试这个：

window.location.replace('#1');

我将由您来选择将其集成到您的网站中的最佳方式，但这里有一个经过最低限度测试的选项来捕获链接点击：

$(window).on('click', 'a', function(e){
    var href = $(e.target).attr('href');
    if (href && href[0] === '#') {
        window.location.replace(e.target.href);
        return false;
    }
});

【讨论】：

使用 .replace() 修改哈希而不创建历史条目。
@Aknosis 我以为我就是这么说的……不是吗？
我只是在重申/总结你所说的。

【解决方案2】：

这是有意的浏览器行为，并且是正确使用哈希标签。因此，我建议考虑使用这些哈希标签的 javascript 是否存在问题，并将其更改为不同的存储方法。实际上，您可以为此目的使用全局可用的 javascript 变量，因为不会发生页面重新加载，因此该变量将持续存在。

window.stage = 'start';

// Another stage
window.stage = 'onfire'

当然，您仍然希望禁止点击 js 元素的标准行为。

或者，如果您希望存储阶段而不是“可导航”，则可以考虑在更现代的浏览器上使用 localstorage。

编辑：（根据新信息）

您正在尝试做的事情是 webdev 中极为常见的场景，因为页面不会通过用户的状态/信息来保存太多。

您希望存储有关用户已完成的内容、他们处于流程中的哪个阶段的信息。即使他们已经离开某个页面。

“存储”数据的位置数量有限：散列、localStorage、cookie、或客户端，仅此而已。如果我是您页面的用户，我怀疑无论我如何浏览您的应用程序，我都希望存储我的数据。

所以我建议考虑一个比散列更好的位置来存储网页的状态，散列通常是为导航而设计的。如果他们要通过 php 登录，只需通过 php 将其存储到数据库中。如果没有，则将其存储到可用的 localStorage 并回退到 cookie，或者仅使用 cookie。

你的最终导航可能看起来像这样纠结：start page > processing page > any other page > processing page > leave the site > return to processing page

但每次他们返回处理页面时，他们的数据都会以他们离开时的状态存储在那里。

如果您出于某种原因必须使用哈希，@Sidncious 的答案有一种方法可能会跳过创建历史条目的步骤，因此如果您将它用于除之前的所有阶段之外的所有阶段如果您换页，您的历史记录将如下所示：start>processing.php>processing.php#final>otherpage.php 这可能会将后退按钮的点击率降低到可接受的水平。

【讨论】：

问题是，还有一个other_page.php。因此，在单击 example.php#3 中的链接后，该链接会将您带到 other_page.php 并返回 example.php，哈希更改确实需要出现，以便可以通过 example.php#3 中的哈希初始化所有元素。这令人困惑......我知道:(
嗯，这在很大程度上取决于您的规范，但使用 localStorage 可以在现代浏览器中解决该问题。这里的重点是，当您需要可导航性时，您 - 应该 - 更改哈希，即使您在所有那些您不希望可导航的阶段旁边使用局部变量。如果您尝试使 example.php 更改状态并且 - 当有人离开 example.php 并返回时不返回到以前的状态 - 那么您可能应该考虑实际存储数据，例如在 php 中的数据库中。所以，呃，更明确的要求？更好的例子？
一些事情：您的原始帖子相当不清楚。以后，我建议跳过示例场景并描述你的实际情况，这会让人们给你更贴切的解决方案建议。您对工作流程的澄清并没有很好地说明您正在尝试做什么。更好的是发布您当前正在做的事情的实时示例/sn-ps，例如在 jsfiddle.net 上。我将编辑我的答案，以尝试更全面地分析并建议解决您遇到的问题的方法。

【解决方案3】：

我遇到了与您描述的相同的问题。我同意 Ivan Ivković 的想法。以下是我的代码，它适用于我的情况。我是JS的新手，但希望它有所帮助。

var counter = 0;
window.onhashchange = function() {
    window.history.replaceState({visited: ++counter}, "visited page", 

window.location.search+window.location.hash);
}

window.onpopstate = function(event) {
    if(event.state.visited && counter>event.state.visited) {
    counter -= 2;
    window.history.go(-1*event.state.visited);
    }
    else {
    counter = event.state.visited;
    }
}

【讨论】：

【解决方案4】：

也许会阻止默认行为并使用 javascript 跳转到哈希？

$("a").click(function(event) {
  $("html,body").scrollTop($(this.hash)[0].offsetTop)
  event.preventDefault();
});

【讨论】：

【解决方案5】：

您可以计算自加载页面以来您点击了多少哈希，然后将该计数与 history.go( - countHashes) 一起使用以返回您的页面。

【讨论】：