76

私は、対応するアニメーションを実行する次のアクションまたは戻るアクションに応じて、プッシュステートを使用するときに問題が発生するWebページを開発しています。イベントを受け取ったときに、ユーザーがPushstate APIを使用して履歴ボタンをクリックしたかどうかを確認するにはどうすればよいですか？それとも自分で何かを実装する必要がありますか？

4

2 に答える 2

70

自分で実装する必要がありますが、これは非常に簡単です。

  • 呼び出すときpushStateは、データオブジェクトに一意の増分ID（uid）を指定します。
  • onpopstateハンドラーが呼び出されたとき。状態uidを、最後の状態uidを含む永続変数と照合します。
  • 永続変数を現在の状態のuidで更新します。
  • 状態uidが最後の状態uidより大きいか小さいかに応じて、異なるアクションを実行します。
于 2012-01-24T00:59:22.150 に答える
8

この回答は、シングルページプッシュステートアプリ、マルチページアプリ、またはその2つの組み合わせで機能するはずです。 （History.lengthMesqualitoのコメントで対処されたバグを修正するために修正されました。）

使い方

履歴スタックへの新しいエントリを簡単にリッスンできます。新しいエントリごとに、仕様ではブラウザが次のことを行う必要があることがわかっています。

  1. 「現在のエントリの後に、ブラウジングコンテキストのセッション履歴のすべてのエントリを削除します」</ li>
  2. 「最後に新しいエントリを追加する」</li>

したがって、エントリーの時点で：

新しいエントリ位置=最後に表示された位置+1

その場合の解決策は次のとおりです。

  1. 各履歴エントリにスタック内の独自の位置をスタンプします
  2. 最後に表示された位置のセッションストアを追跡します
  3. 2つを比較して進行方向を発見する

サンプルコード

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 に答える