WindowEventHandlers.onpopstate

WindowEventHandlers ミックスインの onpopstate プロパティは、ウィンドウの popstate イベントを処理するための EventHandler です。

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

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

構文

window.onpopstate = funcRef;
  • funcRef は、ハンドラ関数です。

例えば、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}

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

仕様

仕様 状態 コメント
HTML Living Standard
onpopstate の定義
現行の標準

ブラウザーの互換性

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

凡例

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

関連情報