如何在浏览器历史记录中找到当前位置索引

Question

浏览器通过 window.history 对象提供了客户端会话中访问的页面列表。借助此功能，客户端代码可以通过列表向前和向后导航（使用 history.back()、history.forward() 和 history.go()）。

但是，客户端代码如何确定当前页面位于历史记录中的哪个位置？例如，如果客户端访问页面 A、B 和 C，则历史记录将包含三个项目，并且当前历史记录项（或状态）将是页面 C。如果用户然后单击“返回”按钮，则当前页面现在为 B。但是，history.length 仍然为 3，反映了总共访问了三个页面的事实。我们如何确定客户端当前处于历史记录中的第二项？

更具体的问题是，我想确定自己是否位于历史记录中的第一项，以便显示一个“关闭”按钮，该按钮将关闭页面（假设 window.opener 不为 null）；在历史记录的任何其他位置，我都想显示一个“返回”按钮，该按钮将导航到上一页。

这似乎是一个奇怪的遗漏，即没有“当前索引”进入历史对象。

注意：这类似于问题＃12895940，但不同之处在于我只需要知道我是否位于历史记录的第一个位置。

- David R Tribble

---

可能是重复的问题：查找用户在浏览器历史记录中的位置。 - user149341

如上面主题所述（@duskwuff），我认为除非创建类似于网络扩展程序来始终跟踪历史记录，否则无法在JavaScript中完成此操作。但是我敢打赌这不是您正在寻找的解决方案。 - lockedz

Answer 1

我想到的唯一办法（只适用于 HTML5+ 浏览器）是类似这样的：

// Onload
{
    if (!history.state  &&  typeof(history.replaceState) == "function")
        history.replaceState({ page: history.length, href: location.href }, "foo");
}

当页面首次加载时，它会将状态对象推入历史记录堆栈（typeof 检查是必需的，以确保浏览器支持 HTML5 的 replaceState() 方法）。

稍后，我可以检查当前历史记录对象是否是被替换列表中的第一个：

if (history.state  &&  history.state.page == 1) {
    // It appears that we are positioned at the first history item
    ...
}

这似乎对于我需要的是足够的。

- David R Tribble

Answer 2

为了支援 HTML5 之前的浏览器，您可以在 URL 上添加查询参数，例如：mysite.com?i=0 表示第一页，i=1 表示用户跳转到下一页等。

当用户点击浏览器的回退按钮时，您可以使用 window.location.search 获取 i 的值，并相应地修改页面以添加关闭/回退按钮。

- scripter