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

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

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

メモ: ブラウザーはページ読み込み時の popstate イベントの扱いが異なる傾向がありましたが、現在では同じ動作になりました。 Firefox はページ読み込み時に popstate イベントを発行していませんでした。 Chrome はバージョン34まで、 Safari はバージョン10.0まで発行していました。

構文

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 イベントが発行されます。

仕様書

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
基本対応Chrome 完全対応 5Edge 完全対応 12Firefox 完全対応 4IE 完全対応 10Opera 完全対応 11.5Safari 完全対応 6WebView Android ? Chrome Android 完全対応 18Edge Mobile ? Firefox Android 完全対応 4Opera Android 完全対応 12Safari iOS 完全対応 5.1Samsung Internet Android ?

凡例

完全対応  
完全対応
実装状況不明  
実装状況不明

関連情報

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

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