如何使浏览器后退按钮跳过内页导航并返回上一页

Posted 2023-05-08

【中文标题】如何使浏览器后退按钮跳过内页导航并返回上一页

【英文标题】：How to make a browser back button skip inner page navigation and go back to a previous page

【发布时间】：2021-08-28 05:05:19

【问题描述】：

我们在 MVC Web 应用程序的某些页面上使用了多个选项卡，在浏览了几个选项卡然后单击返回按钮后，URL 会相应更改，但您必须单击所有这些选项卡，直到您转到上一页。

我想做的是，只要我单击浏览器的后退按钮，就返回上一页，所以基本上跳过所有包含“#”的 URL。例如，如果我到 page2#tab3 喜欢： page1 -> page2#tab1 -> page2#tab2 -> page2#tab3，我想在点击返回按钮时page2#tab3 -> page1。

我们已经有了自定义导航按钮，但我们也想实现它。

【问题讨论】：

网址会相应改变 - 您使用的是pushState吗？改为replaceState

@freedomn-m 听起来他们更像是在使用一个简单的

@Kaiido 很有可能，但是为什么称它为“内页导航”呢？显然需要 OP 提供更多信息。

如果您谈论的是浏览器后退按钮，则无法自定义其行为。你需要像@freedomn-m 提到的那样操纵历史。如果您在某处添加一个明确指示用户将从 page2#tab3 重定向到 page1 的链接，则在用户体验方面会更好。

是的，如果我不清楚“内页导航”，我很抱歉，它是哈希导航。 @CoodleNoodle 我们确实有这样做的链接/按钮，但我被赋予了一项任务，看看是否有办法使用浏览器后退按钮来完成我在问题中所描述的事情

【参考方案1】：

您可以使用onhashchange 监听器来满足您的自定义需求。请检查 https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onhashchange

您还可以根据需要修改 HistoryAPI。请检查 https://developer.mozilla.org/en-US/docs/Web/API/History

【讨论】：

谢谢，我同时也发现了onhashchange，但现在我在检测用户点击返回按钮时遇到了问题。我已经尝试过 PerformanceNavigationTiming，但它没有按预期工作，至少在 Chrome 中没有。由于某种原因，它总是“导航”，而不是“后退”类型。 developer.mozilla.org/en-US/docs/Web/API/…

如果我的回答有助于您前进，您可以投票赞成。逻辑应该是检查此侦听器中 url 中是否存在 #，然后将历史记录中的该项替换为第一个不带哈希的 url。

抱歉，我没有足够的声望来投票。 :( 另外我的问题仍未解决，已被搁置，我现在还有其他更紧迫的任务要完成。无论如何，谢谢，如果可以的话，我肯定会支持你的答案。

【参考方案2】：

在反应中你可以用 useHistory 钩子来做。但是我不知道如何在普通的JS项目中实现。

【讨论】：

这没什么用，是吗？ OP 没有提到任何关于 React 的内容。