javascript - 有没有办法使用“后退”按钮关闭模式而不篡改浏览器历史记录状态？

Question

我有一个相当具体的用例。

假设我从页面 A 导航到页面 B(添加一个历史状态)。然后，在页面 B 上，我通过打开模式与该页面进行交互。但模式的实现方式是在单击浏览器后退按钮时关闭。

当模式打开时:

ngOnInit(): void {
        history.pushState(null, null, this.pageBHomeUrl + "?modal");
    }

当它关闭时，模态状态将替换为之前的主页网址:

close(): void {
        history.replaceState(null, null, this.pageBHomeUrl);
    }

当我关闭模式时，我的浏览器历史记录如下所示(最近的在前)

• pageBHomeUrl
• 页面A

但是，我想确保可以关闭模​​式同时将页面 A 保留为最新的历史状态...有没有办法删除 pageBHomeUrl 历史状态或向前移动 pageA 状态？或者使用后退按钮关闭模式而不更改历史状态？

Answer 1

当您从 A 导航到 B 时，您的历史记录如下所示:

• 页面A
• pageBHomeUrl - 当前

当您打开模式并调用 pushState 时，您的历史记录将如下所示:

• 页面A
• pageBHomeUrl
• pageBHomeUrl?modal - 当前

当您使用按钮关闭模式并调用 replaceState 时，您的历史记录将如下所示:

• 页面A
• pageBHomeUrl
• pageBHomeUrl - 当前

这不是你想要的。在 close 处理程序中使用 popState 而不是 replaceState，从模式返回到所需的历史记录:

• 页面A
• pageBHomeUrl - 当前