如果 popstate 事件来自 HTML5 Pushstate 的后退或前进操作，如何检索？

Question

我正在开发一个网页，根据下一个或后一个操作我执行相应的动画，使用推送状态时会出现问题。当我收到事件时，我如何知道用户是否使用 Pushstate API 单击了后退或前进历史按钮？或者我是否必须自己实现某些功能？

Answer 1

您必须自己实现它，这很容易。

• 调用 pushState 时，为数据对象提供唯一的递增 ID (uid)。
• 当调用 onpopstate 处理程序时；根据包含最后一个状态 uid 的持久变量检查状态 uid。
• 使用当前状态 uid 更新持久变量。
• 根据状态 uid 是否大于或小于上一个状态 uid 执行不同的操作。

Answer 2

以下内容应适用于单页应用程序、多页应用程序或两者的组合。

这个解决方案的关键在于 HTML 规范的要求
（或者曾经，如果我可以查找哪里）。
对于历史堆栈中的每个新条目，浏览器必须：（引用）

1. 删除当前条目之后浏览上下文会话历史记录中的所有条目
2. 在末尾添加新条目

因此新条目的堆栈位置始终等于当前位置+1
（堆栈顶部）。随着新页面本身的出现，这将变为最后显示的位置+ 1。

解决方案是：

1. 在历史堆栈中为每个新条目标记其自己的位置
2. 在会话存储中跟踪最后显示的位置
3. 发现行进方向

通过比较两个示例代码

（已更正以修复 History.length bug 在 Mesqualito 的评论中得到解决。）

'use strict';

function reorient() { // After travelling in the history stack
    const positionLastShown = Number( // If none, then zero
      sessionStorage.getItem( 'positionLastShown' ));
    let position = history.state; // Absolute position in stack
    if( position === null ) { // Meaning a new entry on the stack
        position = positionLastShown + 1; // Top of stack

        // (1) Stamp the entry with its own position in the stack
        history.replaceState( position, /*no title*/'' ); }

    // (2) Keep track of the last position shown
    sessionStorage.setItem( 'positionLastShown', String(position) );

    // (3) Discover the direction of travel by comparing the two
    const direction = Math.sign( position - positionLastShown );
    console.log( 'Travel direction is ' + direction ); }
      // One of backward (-1), reload (0) and forward (1)

addEventListener( 'pageshow', reorient );
addEventListener( 'popstate', reorient ); // Travel in same page

测试页面

这里是 测试显示代码运行的页面。
其中包括一个变体，用本地存储替换会话，
但在其他方面是相同的。

限制

当我最初发布这个答案时，示例代码在我测试的所有浏览器中都有效，
包括火狐浏览器。现在它在 Firefox 下失败了（错误报告）
除非您将代码从会话切换到本地存储（例如像这里） 。

该解决方案忽略页面的历史条目
与应用程序的原始域无关，就好像用户从未访问过它们一样。
它仅计算与显示的最后一个域页面相关的行进方向，
无论用户在其间访问过任何外部页面。
如果您希望用户将外部条目推送到历史堆栈上
（请参阅 Atosk 的评论），那么您可能需要一个解决方法。