onpopstate はウィンドウの popstate イベントのイベントハンドラーです。

popstate イベントは、同じ文書の2つの履歴項目の間で、アクティブな履歴項目が変わるたびにウィンドウに発行されます。アクティブな履歴項目が history.pushState() を呼び出したことで作成されたり、、 history.replaceState() を呼び出したことで影響されたりした場合、 popstate イベントの state プロパティが履歴項目の状態オブジェクトのコピーを保持します。

メモ: history.pushState() 又は history.replaceState() を呼び出すことは、 popstate イベントのトリガーにはなりません。 popstate イベントは、戻るボタンをクリックしたり (又は JavaScript で history.back() を呼び出したり)、同じ文書で2つの履歴項目間を移動したりするように、ブラウザーのアクションを実行することのみがトリガーになります。

ブラウザーはページ読み込み時の popstate イベントの扱いが異なる傾向があります。 Chrome (v34 以前) 及び Safari (10.0 以前) は常にページ読み込み時に popstate イベントを発行しますが、 Firefox は長い間、発行していませんでした。最近のバージョンでは対応しています。

構文

window.onpopstate = funcRef;
  • funcRef is a handler function.

popstate イベント

例えば、以下のコードを実行している http://example.com/example.html は、目印としてアラートを生成します。

window.onpopstate = function(event) {
  alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
};

history.pushState({page: 1}, "title 1", "?page=1");
history.pushState({page: 2}, "title 2", "?page=2");
history.replaceState({page: 3}, "title 3", "?page=3");
history.back(); // alerts "location: http://example.com/example.html?page=1, state: {"page":1}"
history.back(); // alerts "location: http://example.com/example.html, state: null
history.go(2);  // alerts "location: http://example.com/example.html?page=3, state: {"page":3}

なお、元の履歴項目 (for http://example.com/example.html) には関連付けられる状態オブジェクトがありませんが、それでも2回目の history.back() の呼び出し後に項目がアクティブになったとき、 popstate イベントが発行されます。

仕様書

関連項目

ドキュメントのタグと貢献者

 このページの貢献者: mfuji09
 最終更新者: mfuji09,