如何得知当前页面所在浏览器 history 中的位置？

Question

如何得知当前页面所在浏览器 history 中的位置？

FFF方

4552780

发布于
2024-09-04 湖北

比如我现在从浏览器首页 A，打开新的页面 B，然后再打开 C 页面。
假设我目前坐标信息相对于整个历史栈就是 3。
那么当我调用 history.back 后，我会回退到 B。

问题：在 JS 中有办法的得知我现在的坐标是 2 吗？

前端 javascript

html5

阅读 859

AI BotBETA

在 JavaScript 中，直接获取当前页面在浏览器历史记录（history stack）中的确切位置（如索引 2）并不是原生支持的功能。浏览器的 history 对象提供了操作会话历史记录的方法，如 history.back(), history.forward(), history.pushState(), 和 history.replaceState()，但它并没有提供一个直接的方法来查询当前页面在历史记录中的索引。

然而，你可以通过一些策略来间接地跟踪这个“位置”：

使用 history.pushState 和 history.replaceState 手动管理状态：
当你使用 history.pushState() 或 history.replaceState() 方法时，你可以将页面的索引或任何用于跟踪状态的信息作为状态对象的一部分。这样，每当页面状态改变时，你都可以更新这个索引。

let historyIndex = 0;

function navigateToPage(url, title, indexIncrement) {
    historyIndex += indexIncrement;
    history.pushState({ index: historyIndex, otherData: '...' }, title, url);
}

// 示例使用
navigateToPage('/pageB', 'Page B', 1); // 现在 historyIndex = 1
navigateToPage('/pageC', 'Page C', 1); // 现在 historyIndex = 2

console.log('当前历史记录位置:', historyIndex); // 输出 2

监听 popstate 事件：
当用户通过浏览器的前进或后退按钮改变历史记录时，可以监听 popstate 事件来更新你的索引。但请注意，popstate 事件不会在你使用 history.pushState() 或 history.replaceState() 时触发，除非是在不同标签页或窗口间导航。
```
window.addEventListener('popstate', function(event) {
    // 注意：这里通常无法直接得知新位置，
    // 但你可以通过比较状态或其他逻辑来推断
    console.log('用户通过浏览器按钮改变了历史记录');
});
```
注意限制：
由于安全和隐私原因，浏览器不允许直接访问或修改完整的会话历史记录。这意味着你不能查看除了当前页面状态以外的其他页面状态，也不能修改或删除它们。

总结，虽然你不能直接获取当前页面在历史记录中的索引，但你可以通过管理自己的状态来间接跟踪它。这通常涉及在导航时更新一个自定义的索引，并在需要时通过状态管理逻辑来查询它。

1 个回答

发布于
2024-09-04 广东

✓ 已被采纳

console.log(history.length) // ❌ 始终返回历史栈长度

监听 popstate 事件，手动维护一个历史栈。只适用于单页应用。

或者使用 Navigation API(en-US)

console.log(navigation.entries())

兼容性不佳：

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

如何得知当前页面所在浏览器 history 中的位置？

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

省市区街道数据在哪里可以下载？

两个promise问题？

在Electron中，我们想要创建特定的BrowserWindow，想要使用react组件作为BrowserWindow的内容，请问如何实现呢？

Object assgin拷贝问题？

js如何在并发中同步两个fetch请求？

H5 可以实现点击按钮保存图片到相册功能吗？