76

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

4

2 回答 2

70

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

  • 调用时pushState为数据对象提供一个唯一的递增 id (uid)。
  • onpopstate调用处理程序时；根据包含最后一个状态 uid 的持久变量检查状态 uid。
  • 使用当前状态 uid 更新持久变量。
  • 根据状态 uid 是大于还是小于上一个状态 uid 执行不同的操作。
于 2012-01-24T00:59:22.150 回答
8

这个答案应该适用于单页推送状态应用程序，或多页应用程序，或两者的组合。 （更正以修复History.lengthMesqualito 评论中解决的错误。）

这个怎么运作

我们可以轻松地监听历史堆栈的新条目。我们知道，对于每个新条目，规范要求浏览器：

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

因此，在进入时：

新进入位置 = 最后显示的位置 + 1

那么解决方案是：

  1. 用自己在堆栈中的位置标记每个历史记录条目
  2. 在会话存储中跟踪最后显示的位置
  3. 通过比较两者来发现行进方向

示例代码

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

另请参阅代码的实时副本。

局限性

这个解决方案忽略了外部页面的历史条目，对于应用程序来说是外部的，就好像用户从未访问过它们一样。它仅计算与最后显示的应用程序页面相关的行进方向，而不考虑其间访问的任何外部页面。如果您希望用户将外部条目推送到堆栈上（请参阅 Atomosk 的评论），那么您可能需要一种解决方法。

于 2018-03-16T20:47:20.507 回答