Question

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

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

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

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

start.php＆gt;点击链接＆gt; processing.php＆gt;点击标签，哈希更改＆gt;

processing.php#1＆gt;点击页面上的其他部分，哈希更改为＆gt;

processing.php#1-2

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

start.php不是processing.php#1

BUT！当我离开时：

processing.php#1-2＆gt;导航到＆gt; otherpage.php

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

processing.php#1-2

以恢复打开的标签和图层。

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

Answer 1

据我所知，如果没有JavaScript，你无法解决这个问题。该片段是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;
    }
});

Answer 2

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

window.stage = 'start';

// Another stage
window.stage = 'onfire'

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

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

编辑:(基于新信息）

您尝试做的事情是webdev中非常常见的情况，因为页面不会通过用户的状态/信息节省太多。

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

“存储”数据的位置数量有限：hash，localStorage，cookies，或客户端，就是这样。如果我是您网页的用户，我怀疑我会想要存储我的数据 - 无论如何 - 我在您的应用中导航。

所以我建议考虑一个更好的存储网页状态的位置，而不是通常用于导航的哈希。如果他们要通过php登录，只需将它通过php存储到数据库中。如果没有，则将其存储到localStorage（可用）并回退到cookie，或者只使用cookie。

您的结束导航可能看起来像这样纠结：start page＆gt; processing page＆gt; any other page＆gt; processing page＆gt; leave the site＆gt; return to processing page

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

如果你必须出于某种原因使用哈希，@ Sidnicious的回答有一种方法可能会跳过创建历史记录条目的步骤，所以如果你将它用于除了之前的所有阶段您更改网页后，您的历史记录将如下所示：start＆gt; processing.php＆gt; processing.php#final＆gt; otherpage.php这可能会将后退按钮降低到可接受的水平

Answer 3

我遇到了与你描述的问题相同的问题。我同意IvanIvković的想法。以下是我的代码，它适用于我的情况。我是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;
    }
}

Answer 4

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

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

Answer 5

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

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

5 个答案:

编辑:(基于新信息）