javascript - 在浏览器页面中移动 "sideways"而不添加到浏览器历史记录

Question

• 在图书页面上，用户点击目录中的第 1 章。
• 在第 1 章页面，用户点击下一章转到第 2 章。
• 用户可以点击下一章任意次数来浏览章节。
• 在任何章节页面，如果用户点击后退 按钮，用户应该返回到图书页面，而不是返回到之前查看过的章节页面。换句话说，章节页面的移动是一种“横向”移动，不会添加到浏览器历史堆栈中。

问题:

点击Next Chapter时必须执行什么Javascript才能有效地从浏览器历史记录中删除当前章节页面，然后转到新章节页面，这样历史堆栈看起来就好像用户从书页到新章节页了吗？

努力:

• 我阅读了很多帖子并阅读了文档，尤其是关于操纵浏览器历史记录的 Mozilla 文档。
• 我试过调用 history.back()(弹出当前条目)然后继续下一章，但当前章节只保留在历史记录中，所以当我单击返回时我会返回到它按钮。
• 我试过 history.replaceState()，但似乎没有用。
• 看来我需要的是 history.popState() 之类的东西，然后继续下一章。
• 我确定我只是遗漏了一些简单的关键成分。

Answer 1

这就是我最终所做的，感谢来自 Limbo 的灵感。来自下一个或上一个链接的 onclick 事件调用此函数:

function sidewaysLink()
{
    history.replaceState({}, "", this.getAttribute("href"));
    history.go(0);
    return false;
}

不知道为什么我花了这么多的错误来弄清楚这个问题。操作很简单:history.replaceState() 替换浏览器堆栈顶部的条目，history.go(0) 转到该顶部条目。 return false 阻止浏览器在返回时对链接进行操作。

我不知道 history.replaceState() 的第一个参数应该是什么。它被标识为“状态对象”(参见 https://developer.mozilla.org/en-US/docs/Web/API/History_API ，其中给出了示例)。我正在传递一个空对象，它似乎有效。第二个参数被标识为“标题”，文档中说它可以安全地为空字符串。

很高兴收到任何发现此方法缺陷或可以提出改进建议的人的来信。看起来效果不错。