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

How to find the current location index in the browser history

本文关键字：位置 索引 浏览器 历史 记录      更新时间：2023-09-26

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

但是客户端代码如何确定当前页面在历史记录中的位置?例如，如果客户端访问了页面A、B和C，历史记录将包含三个条目，当前的历史记录条目(或状态)将是页面C。如果用户随后单击"后退"按钮，当前页面现在是B。然而，history.length仍然是3，反映了总共访问了三个页面的事实。我们如何确定客户当前处于历史记录中的第2项?

一个更具体的问题是，我想确定我是否位于历史记录中的第一个项目，这样我就可以显示一个"关闭"按钮，这将关闭页面(假设window.opener不是null);在历史记录的任何其他位置，我想显示一个"返回"按钮，它将导航到上一页。

历史对象中没有"当前索引"，这似乎是一个奇怪的遗漏。

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

我想到的唯一的东西(这只适用于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
    ...
}

为了支持HTML5浏览器，你可以在url中添加一个查询参数，例如:mysite.com?i=0用于第一页，i=1用于导航到下一页等。

当用户点击后退按钮时，您可以使用window.location.search检索i的值，并使用相应的关闭/后退按钮修改您的页面。

相关文章：