有没有办法在不篡改浏览器历史状态的情况下使用后退按钮关闭模式？

Question

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

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

打开模式时：

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

并且当它关闭时，模态状态将替换为以前的主页 url:

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

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

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

Answer 1

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

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

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

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

Is there a way to close a modal using Back button without tampering browser history states?