Question

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

问题：

单击下一章以有效地从浏览器历史记录中删除当前章节页面，然后转到新的章节页面时，必须执行什么Javascript，以便历史记录堆栈看起来就像用户从书本页面进入了新的章节页面？

努力：

我已经阅读了许多文章并阅读了文档，尤其是有关操纵浏览器历史记录的Mozilla文档。
我尝试过调用history.back（）（弹出当前条目），然后继续进行下一章，但是当前章只保留在历史记录中，因此当我单击“返回”时，会回到历史记录按钮。
我已经尝试过history.replaceState（），但这似乎无济于事。
似乎我需要的是诸如history.popState（）之类的内容，然后继续下一章。
我确定我只是缺少一些简单的关键要素。

Answer 1

我建议您使用history软件包。

您的代码如下

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

然后在下一章中使用history.replace("/url/to/your/next/chapter")。如果用户从书籍页面转到第一章，则下一章将替换当前位置，这意味着上一位置将引用为书籍。这意味着对于返回，您将使用history.goBack()。

希望有帮助！

Answer 2

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

因此，解决此问题的一种方法是将章节页面保存在数组中 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在某些方法中基于currentPage更改URL，然后可以在页面加载时从currentChapter中得出currentPage刷新。

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，其中提供了示例）。我正在传递一个空对象，它似乎可以工作。第二个参数被标识为“标题”，文档说它可以安全地为空字符串。

很高兴听到有人发现这种方法存在缺陷或可以提出改进建议。似乎运作良好。

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

3 个答案: