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

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

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


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

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

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 

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

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

据我所知,没有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元素点击的标准行为。

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

编辑:(根据新信息)

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

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

“存储”数据的位置数量有限:hash,localStorage,cookies 或客户端 ,这就是它。 如果我是您网页的用户,我怀疑我会想要存储我的数据 – 无论如何 – 我浏览您的应用。

因此,我建议考虑一个更好的存储网页状态的位置,而不是通常用于导航的哈希。 如果他们要通过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 ,它可以减少后退按钮,降低到可接受的水平。

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

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

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

您可以计算自加载页面以来已点击的哈希值,然后将该计数与history.go( – countHashes)一起使用以返回到您的页面。