如何在加载另一个页面之前从浏览器历史记录中删除哈希锚跟随链接

编程问答 2022-06-03

问题描述

我有一个用于小屏幕设备的菜单（侧栏），当用户打开菜单时，它将运行：

window.history.pushState(null,null,"#menu");

当用户单击后退按钮（Android设备）后，我希望它关闭 使用以下代码可以做到这一点：

$(window).on("popstate",closeMenu)

因此，如果用户单击“后退”按钮，它将返回到以前的状态（从url删除#menu并运行函数closeMenu）。

一切正常，但是如果用户通过菜单链接浏览页面，如下所示：

  • 用户在家里；
  • 转到第x页；
  • 转到第y页，
  • 并返回第x页。

现在需要按两次返回按钮回家

发生这种情况是因为window.history.pushState正在向浏览器添加新的历史记录。当用户单击任何链接时，将打开菜单，因此请求时的当前URL为：mysite.com/anyPage#menu;

浏览器从mysite.com/anyPage#menu导航到mysite.com/anotherPage。

每次用户返回到X页，然后转到另一个页面，然后再次返回X，它都会在历史记录中再添加一个（＃）。

我能够通过以下方式减少历史记录中的＃数量：

//(instead the first code)
    if (!(window.location.toString().indexOf("#") > 0)) {
        window.history.pushState(null,"#menu");
    }

因此，历史记录中的最大不需要页面现在为1（这使用户在按钮中单击两次）； 修复它的最佳方法是什么？我认为，如果在加载下一页之前运行window.history.back（）可能可行，但我没有成功。

我考虑过使用window.onbeforeunload，然后在我的函数中使用

： 
window.history.back()

，但是它会停止导航到下一个链接，并使浏览器返回上一页而不是跟随该链接 我还考虑过replaceState：

  let uri = window.location.toString();
  if(uri.indexOf("#")>0){
      uri = uri.substring(0,uri.indexOf("#"));
  }
                  
  history.replaceState(null,'',uri);

我可以在URL浏览器中看到从URL中删除了＃菜单，但是我认为此时浏览器已经从包含＃的源URL中请求了链接页面。还是我错了？

一旦我无法获得使浏览器像这样加载的元素：

//onbeforeunload:
e.target.activeElement
document.activeElement

我还认为也可以使用onbeforeunload，处理菜单中所有链接中的click事件，因此我可以在请求新页面并以编程方式打开链接之前运行window.history.back（），但是我不知道它是否最好的方法

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

anchorback-buttonbrowser-historyhashtagjavascript