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

Question

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

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

Answer 1

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

---

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

或者使用 Navigation API(en-US)

console.log(navigation.entries())

兼容性不佳：

Answer 2

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

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

1. 使用 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

2. 监听 popstate 事件：
   当用户通过浏览器的前进或后退按钮改变历史记录时，可以监听 popstate 事件来更新你的索引。但请注意，popstate 事件不会在你使用 history.pushState() 或 history.replaceState() 时触发，除非是在不同标签页或窗口间导航。

   window.addEventListener('popstate', function(event) {
       // 注意：这里通常无法直接得知新位置，
       // 但你可以通过比较状态或其他逻辑来推断
       console.log('用户通过浏览器按钮改变了历史记录');
   });

3. 注意限制：
   由于安全和隐私原因，浏览器不允许直接访问或修改完整的会话历史记录。这意味着你不能查看除了当前页面状态以外的其他页面状态，也不能修改或删除它们。

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