防止 window.history 中的重复实例

Question

我有一个主页，您可以在其中将其他页面加载到容器中。加载页面时，您仍在主页上，但浏览器 URL 应设置为加载页面的 URL。关闭加载页面时，URL应该重置为主页面的url。

我想通过简单地使用 history.replaceState 或 pushState 来解决这个问题，而不必返回浏览器历史记录（因为返回会导致某些浏览器刷新并弄乱滚动） .

我目前的解决方案是

clickLoadPage => (pageUrl) { 
    closeOtherLoadedPages();
    if (isOnMainPage())
        pushState(pageUrl)
    else
        replaceState(pageUrl)
 } 
clickUnloadPage => () {
    replaceState(mainpageUrl);
}

注意：它被设计成任何时候只加载一个页面。示例：首先加载 page1。然后加载page2。预期效果：page1 关闭，url 被 page2 替换。在那种状态下，在浏览器中返回将 return 到主页 url。

问题是每次加载新页面然后关闭它时，window 历史记录都会添加一个带有主页面的新状态。这些状态应该只有 1 个，但我最终得到了几个。

是否可以通过其他方式解决此问题？我对 window.history api 不太熟悉，是否可以执行删除状态或确保不添加重复状态等操作？

Answer 1

当页面关闭时，您可以调用history.back()方法从历史中弹出状态，因此url将更改为上一个。

如果您已经打开了第 1 页并且想要打开第 2 页，则需要调用方法关闭已打开的页面以从历史记录中弹出状态，然后再打开另一个页面。

防止 window.history 中的重复实例

Prevent duplicate instances in window.history

javascript

browser-history