Javascript 如何使浏览器后退按钮忽略哈希标记？

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

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

---

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

所以我访问了一个页面：

start.php

>单击链接>

processing.php

>单击选项卡，散列更改>

processing.php#1

>单击页面上的其他部分，哈希更改为>

processing.php#1-2

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

start.php

NOT

processing.php#1

---

但是！当我从：

processing.php#1-2

>导航到>

otherpage.php

然后点击后退按钮，我需要返回：

processing.php#1-2 processing.php#1-2 以恢复打开的选项卡和图层

---

这可能吗！？感谢您的帮助

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

window.stage = 'start';

// Another stage
window.stage = 'onfire'

当然，您仍然希望通过单击js元素来抑制标准行为

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

编辑：（基于新信息） 您试图做的事情是webdev中非常常见的场景，因为页面不会通过用户的状态/信息来节省太多

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

“存储”数据的位置数量有限：散列、本地存储、cookie或客户端，仅此而已。如果我是你页面的用户，我想我会希望我的数据被存储，不管我如何浏览你的应用程序

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

您的终端导航可能看起来很复杂：

起始页

处理页

任何其他页面

处理页

离开站点

返回处理页

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

---

如果出于某种原因必须使用散列，@Sidnicious的回答可能会跳过创建历史记录条目的步骤，因此，如果您在所有阶段（除了更改页面之前的阶段）都使用散列，您的历史记录如下所示：

start

processing.php

processing.php#final

otherpage.php

，它可以将后退按钮的点击减少到可接受的水平。

可能会阻止默认行为，并使用javascript跳转到哈希

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

据我所知，没有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;
    }
});

---

您可以计算自加载页面以来单击的哈希数，然后将该计数与历史记录一起使用。转到（-countHashes）返回页面。

我遇到了与您描述的问题相同的问题。我同意伊万·伊夫科维奇的想法。下面是我的代码，它适用于我的案例。我是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;
    }
}

---

据我所知，这是不可能的。可能需要编写一些hacky散列操作代码，在散列更改时存储历史记录，当浏览器返回时，它会触发一个事件以继续返回，直到退出页面。这可能比它的价值更大。我建议只运行JS事件而不生成新的哈希标记，因为你显然不再需要它们。我需要。我需要他们从example.php#1转到other#page.php，然后再回到example.php#1查看历史方法问题是，还有一个other#page.php。因此，在单击example.php#3中的链接（该链接将带您到other_page.php并返回example.php）之后，确实需要显示哈希更改，以便所有元素都可以通过example.php#3中的哈希进行初始化。这让人困惑。。。我知道：（当然，这在很大程度上取决于您的规范，但在现代浏览器中使用localStorage可以解决这个问题。这里的要点是，当您需要可导航性时，您应该更改哈希，即使您在不希望可导航的所有阶段旁边都使用了一个局部变量当有人离开example.php返回时，不要返回到它以前的状态，那么您可能应该考虑实际存储数据，例如。