如何使浏览器返回按钮忽略哈希标记

How to make the browser back button disregard hash tags?

本文关键字：哈希标 按钮 何使 浏览器 返回      更新时间：2023-09-26

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

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

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

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

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

以便恢复打开的选项卡和层。

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

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

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

window.stage = 'start';
// Another stage
window.stage = 'onfire'

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

或者，如果您希望存储stage，但不希望"navigatable"，则可以考虑在更现代的浏览器上使用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

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

如果由于某种原因必须使用哈希，@Sidnicious的答案可能会跳过创建历史记录条目的步骤，因此，如果您将其用于除更改页面之前的阶段之外的所有阶段，则您的历史记录将如下所示：start>processing.php>processing.php#final>otherpage.php，这可能会将后退按钮的点击次数减少到可接受的水平。

我遇到了与您描述的问题相同的问题。我同意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;
    }
}

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

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

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

相关文章：