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

Question

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

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

---

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

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

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

为了恢复打开的标签和图层.

那可能吗!？任何帮助表示赞赏!

Answer 1

据我所知,你不能没有JavaScript解决这个问题.该片段是URL的一部分,当它更改时,新URL将添加到历史记录中.

我建议location.replace()您在不创建历史记录条目的情况下更改URL.而不是设置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;
    }
});

Answer 2

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

window.stage = 'start';

// Another stage
window.stage = 'onfire'

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

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

编辑：（根据新信息）

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

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

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

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

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

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

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