History
History インターフェイスで、ブラウザーのセッション履歴、つまり現在のページが読み込まれたタブまたはフレームで訪問したページを操作することができます。
history のインスタンスは 1 つしかなく(シングルトンです)、グローバルオブジェクト history を通してアクセスできます。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | 1 | 18 | 1 | |
| History.back() メソッドは、ブラウザーにセッション履歴内で 1 つ前のページに戻らせます。 | 1 | 12 | 1 | 1 | 18 | 1 |
| History.forward() メソッドにより、ブラウザーはセッション履歴の 1 つ次のページに移動します。これは History.go を呼び出すのと同じ効果があります。 | 1 | 12 | 1 | 1 | 18 | 1 |
| History.go() メソッドは、セッション履歴から特定のページを読み込みます。これを用いると、引数の値に応じて履歴の中を前方や後方に移動することができます。 | 1 | 12 | 1 | 1 | 18 | 1 |
| History.length は読み取り専用のプロパティで、セッション履歴に含まれる要素の数を、現在読み込まれているページを含めて表す整数を返します。 | 1 | 12 | 1 | 1 | 18 | 1 |
| HTML 文書では、 history.pushState() メソッドはブラウザーのセッション履歴スタックに項目を追加します。 | 5 | 12 | 4 | 5 | 18 | 4 |
| History.replaceState() メソッドは、現在の履歴を編集し、メソッドに引数で渡された状態オブジェクトや URL で置き換えます。このメソッドは、ユーザーのアクションに応じて現在の履歴項目の状態オブジェクトや URL を更新したい場合に特に便利です。 | 5 | 12 | 4 | 5 | 18 | 4 |
| scrollRestoration は History インターフェイスのプロパティで、ウェブアプリケーションが履歴の移動の動作で既定のスクロール位置の復元を明示的に設定できるようにします。 | 46 | 79 | 46 | 11 | 46 | 11 |
| state は History インターフェイスの読み取り専用プロパティで、履歴スタックの一番上の状態を表す値を返します。これは Window/popstate_event イベントを待つことなく、状態を見ることができる方法です。 | 19 | 12 | 4 | 6 | 25 | 6 |
| PopStateEvent は popstate イベントのインターフェイスです。 | 4 | 12 | 4 | 6 | 18 | 6 |
| PopStateEvent インターフェースの読み取り専用プロパティ `hasUAVisualTransition` は、ユーザーエージェントがこのイベントをディスパッチする前に、このナビゲーションに対して視覚的な遷移を実行した場合に true を返し、それ以外の場合は false を返します。 | 118 | 118 | 149 | 18 | 118 | 18 |
| PopStateEvent() コンストラクターは、新しい PopStateEvent オブジェクトを生成します。 | 16 | 14 | 11 | 6 | 18 | 6 |
| state は PopStateEvent インターフェイスの読み取り専用プロパティで、このイベントが生成されたときに格納された状態を表します。 | 4 | 12 | 4 | 6 | 18 | 6 |
| Window.history は読み取り専用プロパティで、 History オブジェクトへの参照を返します。これはブラウザーのセッション履歴 (現在のページが読み込まれているタブまたはフレームで訪れたことがあるページ群) を操作するためのインターフェイスを提供します。 | 1 | 12 | 1 | 1 | 18 | 1 |
| popstate は Window インターフェイスのイベントで、ユーザーがセッション履歴を操作している間にアクティブな履歴項目が変更されたときに発行されます。これは現在の履歴項目をユーザーが最後に訪れたページのものに変更するか、または history.pushState() が履歴項目を履歴スタックに追加するために使用されていた場合、その履歴項目が代わりに使用されます。 | 5 | 12 | 4 | 5 | 18 | 4.2 |
- Firefox 5までは、渡されるオブジェクトはJSONを使用してシリアライズされていました。Firefox 6からは、オブジェクトは構造化クローンアルゴリズムを使用してシリアライズされるようになりました。これにより、より多様なオブジェクトを安全に渡すことが可能になりました。
- Firefox 5までは、渡されるオブジェクトはJSONを使用してシリアライズされていました。Firefox 6からは、オブジェクトは構造化クローンアルゴリズムを使用してシリアライズされるようになりました。これにより、より多様なオブジェクトを安全に渡すことが可能になりました。
- バージョン34以前は、Chromeはページの読み込み時に`popstate`イベントを発火させていました。
- バージョン10以前では、Safariはページの読み込み時に`popstate`イベントを発火させていました。
- バージョン34以前、Chrome for Androidでは、ページの読み込み時に `popstate` イベントが発生していました。
- バージョン10以前、iOS版のSafariでは、ページ読み込み時に`popstate`イベントが発生していました。
実務での使いどころ
-
History の活用
History インターフェイスで、ブラウザーのセッション履歴、つまり現在のページが読み込まれたタブまたはフレームで訪問したページを操作することができます。
注意点
- 古いブラウザでは対応していない場合がある。
実装メモ
- 一部の API はセキュアコンテキスト (HTTPS) やユーザー操作起点を必要とする。利用前に要件を確認すること。