在浏览器页面中“横向”移动而不添加到浏览器历史记录

Question

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

问题：

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

努力：

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

Answer 1

据我了解，您无法使用历史记录对象，因为如果他们跳转章节并按回页，他们将回到点击返回页而不是返回页面之前的位置。

因此，解决此问题的一种方法是将章节页面保存在数组中 E.G

let currentPage = 0;
let currentChapter = 0;
let totalPages = 97;
let chapters = [0,3,25,51,63]

let nextPage = () => {
    if(currentPage+1 > totalPages) return;
    currentPage++;
    if(currentPage > chapters[currentChapter]){
        currentChapter++;
    }
}
let prevPage = () => {
    if(currentPage == 0) return;
    currentPage--;
    if(currentPage < chapters[currentChapter]){
        currentChapter--;
    }
}
let nextChapter = () => {
    if(currentChapter+1 > chapters.length) return;
    currentChapter++;
    currentPage = chapters[currentChapter]
}
let previusChapter = () => {
    if(currentChapter == 0) return;
    currentChapter--;
    currentPage = chapters[currentChapter]
}

有了这个，你可以使用pushState来改变基于sll方法中currentPage的URL，然后你可以在页面加载时从currentPage中计算出currentChapter，这将允许刷新发生。

Answer 2

我建议你使用history 包。

你的代码看起来像

import { createBrowserHistory } from "history"
const history = createBrowserHistory()

那么对于下一章，您将使用history.replace("/url/to/your/next/chapter")。 如果用户从书页转到第一章，那么每个下一章都会替换当前位置，这意味着以前的位置将引用 书。 这意味着对于Back，您将使用history.goBack()。

希望有帮助！

Answer 3

这就是我最终所做的，感谢 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，其中给出了一个示例）。我正在传递一个空对象，它似乎有效。第二个参数被标识为“标题”，文档说它可以安全地是一个空字符串。

很高兴听到任何人发现此方法存在缺陷或提出改进建议。看起来效果不错。