Navigation API
Navigation API の Navigation インターフェイスは、プログラムによるナビゲーションの開始、ナビゲーション履歴エントリの調査、ナビゲーションの発生時の管理など、現在のウィンドウにおけるすべてのナビゲーションアクションを 1 つの集中管理された場所で制御できるようにします。
これは Window.navigation プロパティを介してアクセスされます。
Navigation API は、現在のページと同一オリジンを持つ現在のブラウジングコンテキストで作成された履歴エントリのみを公開します (例: 埋め込み <iframe> 内のナビゲーションやクロスオリジンナビゲーションは含まれません)。これにより、あなたのアプリ専用の以前のすべての履歴エントリの正確なリストが提供されます。このため、履歴の走査は、従来の History API を使用するよりもはるかに脆弱性の低いものになります。
EventTarget
Navigation
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 102 | 102 | 147 | 26.2 | 102 | 26.2 | |
| Navigation API の NavigateEvent インターフェースは、Navigation/navigate_event イベントに対応するイベントオブジェクトであり、あらゆる種類のナビゲーションが開始された際に発生します(これには History.go() などの History API 機能の使用も含まれます)。NavigateEvent を使用すると、そのナビゲーションに関する情報にアクセスできるほか、開発者はナビゲーションをインターセプトして制御することが可能になります… | 102 | 102 | 147 | 26.2 | 102 | 26.2 |
| NavigateEvent インターフェースの読み取り専用プロパティ `canIntercept` は、ナビゲーションをインターセプトして URL を書き換えることができる場合は `true` を返し、そうでない場合は `false` を返します。 | 105 | 105 | 147 | 26.2 | 105 | 26.2 |
| NavigateEvent インターフェースの destination 読み取り専用プロパティは、移動先の目的地を表す NavigationDestination オブジェクトを返します。 | 102 | 102 | 147 | 26.2 | 102 | 26.2 |
| NavigateEvent インターフェースの read-only プロパティである downloadRequest は、ダウンロードナビゲーション(例:download 属性を持つ a 要素や area 要素)の場合、ダウンロードが要求されたファイルのファイル名を返し、それ以外の場合は null を返します。 | 102 | 102 | 147 | 26.2 | 102 | 26.2 |
| NavigateEvent インターフェースの formData 読み取り専用プロパティは、POST フォーム送信の場合、送信されたデータを表す FormData オブジェクトを返し、それ以外の場合は null を返します。 | 102 | 102 | 147 | 26.2 | 102 | 26.2 |
| NavigateEvent インターフェースの読み取り専用プロパティ `hashChange` は、ナビゲーションがフラグメントナビゲーション(つまり、同じドキュメント内のフラグメント識別子への移動)である場合に `true` を返し、それ以外の場合は `false` を返します。 | 102 | 102 | 147 | 26.2 | 102 | 26.2 |
| NavigateEvent インターフェースの読み取り専用プロパティ `hasUAVisualTransition` は、ユーザーエージェントがこのイベントをディスパッチする前に、このナビゲーションに対して視覚的な遷移を実行した場合に true を返し、それ以外の場合は false を返します。 | 118 | 118 | 147 | 26.2 | 118 | 26.2 |
| NavigateEvent インターフェースの info プロパティは読み取り専用であり、ナビゲーション操作(Navigation.back() や Navigation.navigate() など)によって渡された info データの値を返します。info データが渡されていない場合は undefined を返します。 | 102 | 102 | 147 | 26.2 | 102 | 26.2 |
| NavigateEvent インターフェースの intercept() メソッドは、このナビゲーションをインターセプトし、NavigationDestination.url の URL への同一ドキュメント内ナビゲーションに変換します。 | 105 | 105 | 147 | 26.2 | 105 | 26.2 |
| NavigateEvent() コンストラクタは、新しい NavigateEvent オブジェクトのインスタンスを作成します。 | 102 | 102 | 147 | 26.2 | 102 | 26.2 |
| NavigateEvent インターフェースの read-only プロパティである navigationType は、ナビゲーションのタイプ(push、reload、replace、または traverse)を返します。 | 102 | 102 | 147 | 26.2 | 102 | 26.2 |
| ナビゲーション処理が完了する前に、ナビゲーションに応じて発生するブラウザによるスクロール動作を手動でトリガーしたい場合は、NavigateEvent インターフェースの scroll() メソッドを呼び出すことができます。 | 105 | 105 | 147 | 26.2 | 105 | 26.2 |
| NavigateEvent インターフェースの read-only プロパティ `signal` は `AbortSignal` を返します。このシグナルは、ナビゲーションがキャンセルされた場合(例:ユーザーがブラウザの「停止」ボタンを押した場合、または別のナビゲーションが開始され、進行中のナビゲーションがキャンセルされた場合など)に、アボート状態になります。 | 102 | 102 | 147 | 26.2 | 102 | 26.2 |
| NavigateEvent インターフェースの userInitiated 読み取り専用プロパティは、ナビゲーションがユーザーによって開始された場合(リンクのクリック、フォームの送信、ブラウザの「戻る」/「進む」ボタンの押下など)、true を返し、それ以外の場合は false を返します。 | 102 | 102 | 147 | 26.2 | 102 | 26.2 |
| Navigation インターフェースの `activation` 読み取り専用プロパティは、この Document を「アクティブ」にした直近のドキュメント間ナビゲーションに関する情報を含む NavigationActivation オブジェクトを返します。このプロパティは、同一ドキュメント内のナビゲーション中は変更されません。 | 123 | 123 | 147 | 26.2 | 123 | 26.2 |
| Navigation インターフェースの back() メソッドは、ナビゲーション履歴を 1 つ前に戻します。 | 102 | 102 | 147 | 26.2 | 102 | 26.2 |
| Navigation インターフェースの読み取り専用プロパティ `canGoBack` は、ナビゲーション履歴をさかのぼることが可能な場合(つまり、`Navigation.currentEntry` が履歴エントリリストの最初のものではない場合)に `true` を返し、そうでない場合は `false` を返します。 | 102 | 102 | 147 | 26.2 | 102 | 26.2 |
| Navigation インターフェースの読み取り専用プロパティ `canGoForward` は、ナビゲーション履歴を前方に移動できる場合(つまり、`Navigation.currentEntry` が履歴エントリリストの最後のものではない場合)に `true` を返し、そうでない場合は `false` を返します。 | 102 | 102 | 147 | 26.2 | 102 | 26.2 |
| Navigation インターフェースの currentEntry 読み取り専用プロパティは、ユーザーが現在移動している場所を表す NavigationHistoryEntry オブジェクトを返します。 | 102 | 102 | 147 | 26.2 | 102 | 26.2 |
| Navigation インターフェースの currententrychange イベントは、Navigation.currentEntry が変更されたときに発生します。 | 102 | 102 | 147 | 26.2 | 102 | 26.2 |
| Navigation インターフェースの entries() メソッドは、既存のすべての履歴エントリを表す NavigationHistoryEntry オブジェクトの配列を返します。 | 102 | 102 | 147 | 26.2 | 102 | 26.2 |
| Navigation インターフェースの forward() メソッドは、ナビゲーション履歴を 1 つ分前へ移動します。 | 102 | 102 | 147 | 26.2 | 102 | 26.2 |
| Navigation インターフェースの navigate() メソッドは、特定の URL に移動し、履歴エントリリストに指定された状態を更新します。 | 102 | 102 | 147 | 26.2 | 102 | 26.2 |
| Navigation インターフェースの navigate イベントは、何らかのナビゲーションが開始された際に発生し、必要に応じてこれを処理することができます。 | 102 | 102 | 147 | 26.2 | 102 | 26.2 |
| Navigation インターフェースの navigateerror イベントは、ナビゲーションが失敗した際に発生します。 | 102 | 102 | 147 | 26.2 | 102 | 26.2 |
| Navigation インターフェースの navigatesuccess イベントは、ナビゲーションが正常に完了したときに発生します。 | 102 | 102 | 147 | 26.2 | 102 | 26.2 |
| Navigation インターフェースの reload() メソッドは、現在の URL を再読み込みし、履歴エントリリストに指定された状態を更新します。 | 102 | 102 | 147 | 26.2 | 102 | 26.2 |
| Navigation インターフェースの transition 読み取り専用プロパティは、進行中のナビゲーションの状態を表す NavigationTransition オブジェクトを返します。このオブジェクトを使用して、ナビゲーションの進行状況を追跡することができます。 | 102 | 102 | 147 | 26.2 | 102 | 26.2 |
| Navigation インターフェースの traverseTo() メソッドは、指定された NavigationHistoryEntry.key で識別される NavigationHistoryEntry へ移動します。 | 102 | 102 | 147 | 26.2 | 102 | 26.2 |
| Navigation インターフェースの updateCurrentEntry() メソッドは、Navigation.currentEntry の状態を更新します。これは、状態の変更がナビゲーションや再読み込みとは無関係に行われる場合に使用されます。 | 102 | 102 | 147 | 26.2 | 102 | 26.2 |
| Navigation API の NavigationActivation インターフェースは、直近のドキュメント間ナビゲーションを表します。これには、ナビゲーションの種類、および移動元と移動先のドキュメント履歴エントリが含まれます。 | 123 | 123 | 147 | 26.2 | 123 | 26.2 |
| NavigationActivation インターフェースの read-only プロパティ `entry` には、ナビゲーション内のインバウンド(「to」)ドキュメントの履歴エントリを表す NavigationHistoryEntry オブジェクトが含まれています。これは、インバウンドドキュメントがアクティブ化された時点での Navigation.currentEntry プロパティと同等です。 | 123 | 123 | 147 | 26.2 | 123 | 26.2 |
| NavigationActivation インターフェースの from プロパティ(読み取り専用)には、ナビゲーションにおける送信元(「from」)ドキュメントの履歴エントリを表す NavigationHistoryEntry オブジェクトが含まれています。 | 123 | 123 | 147 | 26.2 | 123 | 26.2 |
| NavigationActivation インターフェースの read-only プロパティである navigationType には、ナビゲーションのタイプを示す文字列が含まれています。 | 123 | 123 | 147 | 26.2 | 123 | 26.2 |
| Navigation API の NavigationCurrentEntryChangeEvent インターフェースは、Navigation.currentEntry が変更された際に発生する「Navigation/currententrychange_event」イベントに対応するイベントオブジェクトです。 | 102 | 102 | 147 | 26.2 | 102 | 26.2 |
| NavigationCurrentEntryChangeEvent インターフェースの fromReadOnly プロパティは、移動元の NavigationHistoryEntry を返します。 | 102 | 102 | 147 | 26.2 | 102 | 26.2 |
| NavigationCurrentEntryChangeEvent() コンストラクタは、新しい NavigationCurrentEntryChangeEvent オブジェクトを作成します。 | 102 | 102 | 147 | 26.2 | 102 | 26.2 |
| NavigationCurrentEntryChangeEvent インターフェースの read-only プロパティ `navigationType` は、変更の原因となったナビゲーションのタイプを返します。変更が `Navigation.updateCurrentEntry()` によって発生した場合、このプロパティは null になることがあります。 | 102 | 102 | 147 | 26.2 | 102 | 26.2 |
| Navigation API の NavigationDestination インターフェースは、現在のナビゲーションで移動先の目的地を表します。 | 102 | 102 | 147 | 26.2 | 102 | 26.2 |
| NavigationDestination インターフェースの getState() メソッドは、該当する NavigationDestination に関連付けられた、開発者が指定した状態のクローン、あるいは状況に応じてナビゲーション操作(例:Navigation.navigate())を返します。 | 102 | 102 | 147 | 26.2 | 102 | 26.2 |
| NavigationDestination インターフェースの read-only プロパティ `id` は、NavigateEvent.navigationType が `traverse` の場合、目的地の NavigationHistoryEntry の `id` 値を返し、それ以外の場合は空の文字列を返します。 | 102 | 102 | 147 | 26.2 | 102 | 26.2 |
| NavigationDestination インターフェースの index 読み取り専用プロパティは、NavigateEvent.navigationType が traverse の場合、宛先の NavigationHistoryEntry の index 値を返し、それ以外の場合は -1 を返します。 | 102 | 102 | 147 | 26.2 | 102 | 26.2 |
| NavigationDestination インターフェースの key 読み取り専用プロパティは、NavigateEvent.navigationType が traverse の場合、宛先の NavigationHistoryEntry の key 値を返し、それ以外の場合は空の文字列を返します。 | 102 | 102 | 147 | 26.2 | 102 | 26.2 |
| NavigationDestination インターフェースの sameDocument 読み取り専用プロパティは、ナビゲーション先が現在の Document 値と同じドキュメントである場合は true を返し、そうでない場合は false を返します。 | 102 | 102 | 147 | 26.2 | 102 | 26.2 |
| NavigationDestination インターフェースの `url` 読み取り専用プロパティは、移動先の URL を返します。 | 102 | 102 | 147 | 26.2 | 102 | 26.2 |
| Navigation API の NavigationHistoryEntry インターフェースは、単一のナビゲーション履歴エントリを表します。 | 102 | 102 | 147 | 26.2 | 102 | 26.2 |
| NavigationHistoryEntry インターフェースの dispose イベントは、そのエントリが履歴エントリリストから削除されたときに発生します。 | 102 | 102 | 147 | 26.2 | 102 | 26.2 |
| NavigationHistoryEntry インターフェースの getState() メソッドは、この履歴エントリに関連付けられた、開発者が指定した状態のクローン値を返します。 | 102 | 102 | 147 | 26.2 | 102 | 26.2 |
| NavigationHistoryEntry インターフェースの read-only プロパティ `id` は、履歴エントリの ID を返します。現在のドキュメントが完全にアクティブでない場合は、空の文字列が返されます。これは、常に特定の履歴エントリを表す、ユーザーエージェントによって生成された一意の値であり、ストレージキャッシュなどの外部リソースとの関連付けに役立ちます。 | 102 | 102 | 147 | 26.2 | 102 | 26.2 |
| NavigationHistoryEntry インターフェースの index 読み取り専用プロパティは、履歴エントリ一覧(つまり、Navigation.entries() によって返される一覧)におけるそのエントリのインデックスを返します。エントリが一覧に含まれていない場合、または現在のドキュメントが完全にアクティブでない場合は -1 を返します。 | 102 | 102 | 147 | 26.2 | 102 | 26.2 |
| NavigationHistoryEntry インターフェースの read-only プロパティ `key` は、履歴エントリのキーを返します。現在のドキュメントが完全にアクティブでない場合は、空の文字列が返されます。これは、エントリリスト内での履歴エントリの位置を表す、ユーザーエージェントによって生成された一意の値です。 これは、Navigation.traverseTo() を使用してその特定のスロットに移動するために使用されます。このキーは再利用されます… | 102 | 102 | 147 | 26.2 | 102 | 26.2 |
| NavigationHistoryEntry インターフェースの sameDocument 読み取り専用プロパティは、この履歴エントリが現在の Document 値と同じドキュメントを対象としており、かつ現在のドキュメントが完全にアクティブな状態である場合に true を返し、それ以外の場合は false を返します。 | 102 | 102 | 147 | 26.2 | 102 | 26.2 |
| NavigationHistoryEntry インターフェースの read-only プロパティである url は、この履歴エントリの絶対 URL を返します。 エントリが現在のドキュメントとは異なるドキュメントに対応している場合(sameDocument プロパティが false である場合など)、かつそのドキュメントが Referrer-Policy ヘッダーが no-referrer または origin に設定された状態で取得された場合、このプロパティは null を返します。現在の… | 102 | 102 | 147 | 26.2 | 102 | 26.2 |
| Navigation API の NavigationTransition インターフェースは、進行中のナビゲーション(つまり、Navigation/navigatesuccessevent または Navigation/navigateerrorevent の段階にまだ到達していないナビゲーション)を表します。 | 102 | 102 | 147 | 26.2 | 102 | 26.2 |
| NavigationTransition インターフェースの finished 読み取り専用プロパティは Promise を返します。この Promise は、Navigation/navigatesuccessevent イベントが発生した時点で解決され、Navigation/navigateerrorevent イベントが発生した時点で拒否されます。 | 102 | 102 | 147 | 26.2 | 102 | 26.2 |
| NavigationTransition インターフェースの from read-only プロパティは、遷移の起点となる NavigationHistoryEntry を返します。 | 102 | 102 | 147 | 26.2 | 102 | 26.2 |
| NavigationTransition インターフェースの read-only プロパティである navigationType は、現在進行中のナビゲーションのタイプを返します。 | 102 | 102 | 147 | 26.2 | 102 | 26.2 |
| navigation は Window インターフェイスの読み取り専用のプロパティであり、現在の window に関連付けられた Navigation オブジェクトを返します。 | 102 | 102 | 147 | 26.2 | 102 | 26.2 |
- 以前は別名で対応していました: canTransition (102)
- 以前は別名で対応していました: canTransition (102)
- 以前は別名で対応していました: canTransition (102)
- このバージョンで機能が削除されました (108)
- 以前は別名で対応していました: transitionWhile (102)
- このバージョンで機能が削除されました (108)
- 以前は別名で対応していました: transitionWhile (102)
- このバージョンで機能が削除されました (108)
- 以前は別名で対応していました: transitionWhile (102)
- このバージョンで機能が削除されました (108)
- 以前は別名で対応していました: restoreScroll (102)
- このバージョンで機能が削除されました (108)
- 以前は別名で対応していました: restoreScroll (102)
- このバージョンで機能が削除されました (108)
- 以前は別名で対応していました: restoreScroll (102)
- Chromeでは、仕様とは異なり、`navigate()`を呼び出す際に`javascript:`で始まるURLが許可されています(バグ439994590)。
- Edgeでは、仕様とは異なり、`navigate()`を呼び出す際に`javascript:`で始まるURLが許可されています(バグ 439994590)。
- Chrome for Androidでは、仕様とは異なり、`navigate()`を呼び出す際に`javascript:`で始まるURLが許可されています(バグ439994590)。
実務での使いどころ
-
Navigation API の活用
Navigation API の Navigation インターフェイスは、プログラムによるナビゲーションの開始、ナビゲーション履歴エントリの調査、ナビゲーションの発生時の管理など、現在のウィンドウにおけるすべてのナビゲーションアクションを 1 つの集中管理された場所で制御できるようにします。
注意点
- 古いブラウザでは対応していない場合がある。
実装メモ
- 一部の API はセキュアコンテキスト (HTTPS) やユーザー操作起点を必要とする。利用前に要件を確認すること。