防止 window.history 中的重复实例

Prevent duplicate instances in window.history

本文关键字：实例 window history 防止      更新时间：2023-09-26

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

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

我目前的解决方案是 

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

注意：它设计为在任何时候只加载一个页面。示例：首次加载页面 1。然后加载页面 2。期望的效果：页面 1 关闭，url 替换为页面 2。在这种状态下，在浏览器中返回将返回到主页 URL。

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

是否有可能以其他方式解决这个问题？我对window.history api 不太熟悉，是否可以做一些事情，比如删除状态，或者确保不添加重复的状态？

当页面被关闭时，你可以调用 history.back（） 方法来从历史记录中弹出状态，因此 url 将更改为上一个。

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

相关文章：