HTML: The Living Standard

Edition for Web Developers — Last Updated 11 September 2023

1. 1. 7.2 ナビゲーションおよびセッション履歴に関連するAPI
      1. 7.2.1 Windowオブジェクト
         1. 7.2.1.1 ウィンドウの開閉
         2. 7.2.1.2 Windowオブジェクトのインデックス付きアクセス
         3. 7.2.1.3 Windowオブジェクトの名前付きアクセス
         4. 7.2.1.4 関連ウィンドウへのアクセス
         5. 7.2.1.5 歴史的なブラウザーインターフェイス要素API
      2. 7.2.2 WindowProxy外来オブジェクト
      3. 7.2.3 Locationインターフェイス
      4. 7.2.4 Historyインターフェイス
      5. 7.2.5 The navigation API
         1. 7.2.5.1 Introduction
         2. 7.2.5.2 The Navigation interface
         3. 7.2.5.3 Core infrastructure
         4. 7.2.5.4 The NavigationHistoryEntry interface
         5. 7.2.5.5 The history entry list
         6. 7.2.5.6 Initiating navigations
         7. 7.2.5.7 Ongoing navigation tracking
         8. 7.2.5.8 The navigate event
            1. 7.2.5.8.1 The NavigateEvent interface
            2. 7.2.5.8.2 The NavigationDestination interface
      6. 7.2.6 イベントインターフェイス
         1. 7.2.6.1 The NavigationCurrentEntryChangeEvent interface
         2. 7.2.6.2 PopStateEventインターフェイス
         3. 7.2.6.3 HashChangeEventインターフェイス
         4. 7.2.6.4 PageTransitionEventインターフェイス
         5. 7.2.6.5 BeforeUnloadEventインターフェイス

7.2 ナビゲーションおよびセッション履歴に関連するAPI

7.2.1 Windowオブジェクト

window.window

window.frames

window.self

これらの属性はすべてwindowを返す。

window.document

windowと関連するDocumentを返す。

document.defaultView

documentに関連付けられたWindowがある場合はそれを返し、そうでなければnullを返す。

7.2.1.1 ウィンドウの開閉

window = window.open([ url [, target [, features ] ] ])

url（デフォルトで"about:blank"）を表示するためのウィンドウを開き、それを返す。target（デフォルトで"_blank"）は、新しいウィンドウの名前を示す。すでにその名前をもつウィンドウが存在する場合、それが再利用される。features引数はコンマ区切りトークンの集合を含むことができる：

"noopener"

"noreferrer"

これらは、ハイパーリンク上のnoopenerおよびnoreferrerリンクタイプと同等に動作する。

"popup"

ユーザーエージェントに、新しいウィンドウに最小限のウェブブラウザーユーザーインターフェイスを提供するように促す。 （すべてのBarPropオブジェクトにもvisibleゲッターに影響を与える。）

globalThis.open("https://email.example/message/CAOOOkFcWW97r8yg=SsWg7GgCmp4suVX9o85y8BvNRqMjuc5PXg", undefined, "noopener,popup");

window.name [ = value ]

ウィンドウの名前を返す。

名前を変更する設定が可能である。

window.close()

ウィンドウを閉じる。

window.closed

ウィンドウが閉じられている場合はtrueを返し、そうでなければfalseを返す。

window.stop()

ドキュメントの読み込みを中止する。

7.2.1.2 Windowオブジェクトのインデックス付きアクセス

window.length

文書ツリーの子ナビゲート可能の数を返す。

window[index]

指定された文書ツリーの子ナビゲート可能に対応するWindowProxyを返す。

7.2.1.3 Windowオブジェクトの名前付きアクセス

window[name]

指示された要素または要素のコレクションを返す。

一般的な規則として、これに依存することはもろいコードを導く。たとえば、新しい機能がウェブプラットフォームに加えられるように、いずれかのIDがこのAPIのマッピングで終わることは時間をかけて変化できる。この代わりに、document.getElementById()またはdocument.querySelector()を使用する。

7.2.1.4 関連ウィンドウへのアクセス

window.top

トップレベルトラバーサルのWindowProxyを返す。

window.opener [ = value ]

オープナーブラウジングコンテキストに対するWindowProxyを返す。

存在しないまたはnullが設定されている場合、nullを返す。

nullに設定可能である。

window.parent

親ナビゲート可能に対するWindowProxyを返す。

window.frameElement

ナビゲート可能コンテナー要素を返す。

存在しない場合、生成元をまたいだ状況でnullを返す。

7.2.1.5 歴史的なブラウザーインターフェイス要素API

歴史的な理由から、Windowインターフェイスには、特定のウェブブラウザーインターフェイス要素の可視性を表すいくつかのプロパティがあった。

プライバシーと相互運用性の理由から、ウィンドウがポップアップウィンドウを表しているかどうかに関係なく、これらのプロパティはすべて同じ値を返すようになった。

window.locationbar.visible

✔MDN

BarProp/visible

Support in all current engines.

Firefox1+Safari3+Chrome1+

---

Opera?Edge79+

---

Edge (Legacy)12+Internet ExplorerNo

---

Firefox Android?Safari iOS1+Chrome Android?WebView Android37+Samsung Internet?Opera Android?

window.menubar.visible

window.personalbar.visible

window.scrollbars.visible

window.statusbar.visible

window.toolbar.visible

Windowがポップアップでない場合はtrueを返す。そうでなければfalseを返す。

7.2.2 WindowProxy外来オブジェクト

WindowProxyは、Windowの通常のオブジェクトをラップする外来オブジェクトであり、ほとんどの操作をラップされたオブジェクトに間接的に転送する。各ブラウジングコンテキストは、関連するWindowProxyオブジェクトを持つ。ブラウジングコンテキストがナビゲートされるとき、ブラウジングコンテキストの関連付けられたWindowProxyオブジェクトによってラップされたWindowオブジェクトが変更される。

7.2.3 Locationインターフェイス

各Windowオブジェクトは、Locationオブジェクトの一意なインスタンスに関連付けられており、Windowオブジェクトの作成時に割り当てられる。

document.location [ = value ]

window.location [ = value ]

現在のページの位置とLocationオブジェクトを返す。

別のページにナビゲートするために、設定可能である。

Locationオブジェクトは、関連付けられたDocumentのURLの表現と、関連付けられたナビゲート可能をナビゲートおよびリロードするためのメソッドを提供する。

location.toString()

location.href

LocationオブジェクトのURLを返す。

与えられたURLにナビゲートするように、設定可能である。

location.origin

Locationオブジェクトの生成元を返す。

location.protocol

Locationオブジェクトのスキームを返す。

変更されたスキームと同じURLにナビゲートするように、設定可能である。

location.host

LocationオブジェクトのURLのホストとポートを返す（スキームのデフォルトポートと異なる場合）。

変更されたホストおよびポートと同じURLにナビゲートするように、設定可能である。

location.hostname

Locationオブジェクトのホストを返す。

変更されたホストと同じURLにナビゲートするように、設定可能である。

location.port

Locationオブジェクトのポートを返す。

変更されたポートと同じURLにナビゲートするように、設定可能である。

location.pathname

Locationオブジェクトのパスを返す。

変更されたパスと同じURLにナビゲートするように、設定可能である。

location.search

LocationオブジェクトのURLのクエリーを返す（空でない場合は先頭の"?"を含む）。

（先頭の"?"を無視して）変更されたクエリーと同じURLにナビゲートするように、設定可能である。

location.hash

LocationオブジェクトのURLのフラグメントを返す（空でない場合は先頭の"#"を含む）。

（先頭の"#"を無視して）変更されたフラグメントと同じURLにナビゲートするように、設定可能である。

location.assign(url)

与えられたURLにナビゲートする。

location.replace(url)

セッション履歴から現在のページを削除し、与えられたURLにナビゲートする。

location.reload()

現在のページをリロードする。

location.ancestorOrigins

祖先ナビゲート可能のアクティブな文書の生成元を列挙する DOMStringListオブジェクトを返す。

7.2.4 Historyインターフェイス

history.length

現在のトラバース可能なナビゲート可能の全体のセッション履歴エントリーの数を返す。

history.scrollRestoration

アクティブなセッション履歴エントリーのスクロール復元モードを返す。

history.scrollRestoration = value

アクティブなセッション履歴エントリーのスクロール復元モードをvalueに設定する。

history.state

アクティブなセッション履歴エントリーのクラシック履歴API状態を、JavaScript値にデシリアライズして返す。

history.go()

現在のページをリロードする。

history.go(delta)

現在のトラバース可能なナビゲート可能の全体のセッション履歴エントリーリストで、指定された数のステップを前後に移動する。

ゼロ差分は、現在のページをリロードする。

差分が範囲外の場合、何もしない。

history.back()

現在のトラバース可能なナビゲート可能の全体のセッション履歴エントリーリストで1ステップ戻る。

前のページが存在しない場合、何もしない。

history.forward()

現在のトラバース可能なナビゲート可能の全体のセッション履歴エントリーリストで1ステップ進める。

次のページが存在しない場合、何もしない。

history.pushState(data, "")

クラシック履歴API状態をデータのシリアル化に設定して、セッション履歴に新しいエントリーを追加する。アクティブな履歴エントリーのURLがコピーされ、新しいエントリーのURLに使用される。

（2番目のパラメーターは歴史的な理由で存在し、省略することはできない。空の文字列を渡すことは慣例的なものである。）

history.pushState(data, "", url)

クラシック履歴API状態をデータのシリアル化に設定し、 URLをurlに設定して、セッション履歴に新しいエントリーを追加する。

現在のDocumentがURLをurlに書き換えることができない場合、"SecurityError" DOMExceptionが投げられる。

（2番目のパラメーターは歴史的な理由で存在し、省略することはできない。空の文字列を渡すことは慣例的なものである。）

history.replaceState(data, "")

アクティブセッション履歴エントリーのクラシック履歴API状態を、 データの構造化クローンに更新する。

（2番目のパラメーターは歴史的な理由で存在し、省略することはできない。空の文字列を渡すことは慣例的なものである。）

history.replaceState(data, "", url)

アクティブなセッション履歴エントリーのクラシック履歴API状態を データの構造化クローンに更新し、そのURLをurlに更新する。

現在のDocumentがURLをurlに書き換えることができない場合、"SecurityError" DOMExceptionが投げられる。

（2番目のパラメーターは歴史的な理由で存在し、省略することはできない。空の文字列を渡すことは慣例的なものである。）

<!DOCTYPE HTML>
<!-- this is https://example.com/line?x=5 -->
<html lang="en">
<title>Line Game - 5</title>
<p>You are at coordinate 5 on the line.</p>
<p>
 <a href="?x=6">Advance to 6</a> or
 <a href="?x=4">retreat to 4</a>?
</p>

<!DOCTYPE HTML>
<!-- this starts off as https://example.com/line?x=5 -->
<html lang="en">
<title>Line Game - 5</title>
<p>You are at coordinate <span id="coord">5</span> on the line.</p>
<p>
 <a href="?x=6" onclick="go(1); return false;">Advance to 6</a> or
 <a href="?x=4" onclick="go(-1); return false;">retreat to 4</a>?
</p>
<script>
 var currentPage = 5; // prefilled by server
 function go(d) {
   setupPage(currentPage + d);
   history.pushState(currentPage, "", '?x=' + currentPage);
 }
 onpopstate = function(event) {
   setupPage(event.state);
 }
 function setupPage(page) {
   currentPage = page;
   document.title = 'Line Game - ' + currentPage;
   document.getElementById('coord').textContent = currentPage;
   document.links[0].href = '?x=' + (currentPage+1);
   document.links[0].textContent = 'Advance to ' + (currentPage+1);
   document.links[1].href = '?x=' + (currentPage-1);
   document.links[1].textContent = 'retreat to ' + (currentPage-1);
 }
</script>

<head>
  <script>
       if ('scrollRestoration' in history)
            history.scrollRestoration = 'manual';
  </script>
</head>
   

7.2.5 The navigation API

7.2.5.1 Introduction

The navigation API, provided by the global navigation property, provides a modern and web application-focused way of managing navigations and history entries. It is a successor to the classic location and history APIs.

One ability the API provides is inspecting session history entries. For example, the following will display the entries' URLs in an ordered list:

const ol = document.createElement("ol");
ol.start = 0; // so that the list items' ordinal values match up with the entry indices

for (const entry of navigation.entries()) {
  const li = document.createElement("li");

  if (entry.index < navigation.currentEntry.index) {
    li.className = "backward";
  } else if (entry.index > navigation.currentEntry.index) {
    li.className = "forward";
  } else {
    li.className = "current";
  }

  li.textContent = entry.url;
  ol.append(li);
}

The navigation.entries() array contains NavigationHistoryEntry instances, which have other useful properties in addition to the url and index properties shown here. Note that the array only contains NavigationHistoryEntry objects that represent the current navigable, and thus its contents are not impacted by navigations inside navigable containers such as iframes, or by navigations of the parent navigable in cases where the navigation API is itself being used inside an iframe. Additionally, it only contains NavigationHistoryEntry objects representing same-origin session history entries, meaning that if the user has visited other origins before or after the current one, there will not be corresponding NavigationHistoryEntrys.

The navigation API can also be used to navigate, reload, or traverse through the history:

<button onclick="navigation.reload()">Reload</button>

<input type="url" id="navigationURL">
<button onclick="navigation.navigate(navigationURL.value)">Navigate</button>

<button id="backButton" onclick="navigation.back()">Back</button>
<button id="forwardButton" onclick="navigation.forward()">Forward</button>

<select id="traversalDestinations"></select>
<button id="goButton" onclick="navigation.traverseTo(traversalDestinations.value)">Traverse To</button>

<script>
backButton.disabled = !navigation.canGoBack;
forwardButton.disabled = !navigation.canGoForward;

for (const entry of navigation.entries()) {
  traversalDestinations.append(new Option(entry.url, entry.key));
}
</script>

Note that traversals are again limited to same-origin destinations, meaning that, for example, navigation.canGoBack will be false if the previous session history entry is for a page from another origin.

The most powerful part of the navigation API is the navigate event, which fires whenever almost any navigation or traversal occurs in the current navigable:

navigation.onnavigate = event => {
  console.log(event.navigationType); // "push", "replace", "reload", or "traverse"
  console.log(event.destination.url);
  console.log(event.userInitiated);
  // ... and other useful properties
};

(The event will not fire for location bar-initiated navigations, or navigations initiated from other windows, when the destination of the navigation is a new document.)

Much of the time, the event's cancelable property will be true, meaning this event can be canceled using preventDefault():

navigation.onnavigate = event => {
  if (event.cancelable && isDisallowedURL(event.destination.url)) {
    alert(`Please don't go to ${event.destination.url}!`);
    event.preventDefault();
  }
};

The cancelable property will be false for some "traverse" navigations, such as those taking place inside child navigables, those crossing to new origins, or when the user attempts to traverse again shortly after a previous call to preventDefault() prevented them from doing so.

The NavigateEvent's intercept() method allows intercepting a navigation and converting it into a same-document navigation:

navigation.addEventListener("navigate", e => {
  // Some navigations, e.g. cross-origin navigations, we cannot intercept.
  // Let the browser handle those normally.
  if (!e.canIntercept) {
    return;
  }

  // Similarly, don't intercept fragment navigations or downloads.
  if (e.hashChange || e.downloadRequest !== null) {
    return;
  }

  const url = new URL(event.destination.url);

  if (url.pathname.startsWith("/articles/")) {
    e.intercept({
      async handler() {
        // The URL has already changed, so show a placeholder while
        // fetching the new content, such as a spinner or loading page.
        renderArticlePagePlaceholder();

        // Fetch the new content and display when ready.
        const articleContent = await getArticleContent(url.pathname, { signal: e.signal });
        renderArticlePage(articleContent);
      }
    });
  }
});

Note that the handler function can return a promise to represent the asynchronous progress, and success or failure, of the navigation. While the promise is still pending, browser UI can treat the navigation as ongoing (e.g., by presenting a loading spinner). Other parts of the navigation API are also sensitive to these promises, such as the return value of navigation.navigate():

const { committed, finished } = await navigation.navigate("/articles/the-navigation-api-is-cool");

// The committed promise will fulfill once the URL has changed, which happens
// immediately (as long as the NavigateEvent wasn't canceled).
await committed;

// The finished promise will fulfill once the Promise returned by handler() has
// fulfilled, which happens once the article is downloaded and rendered. (Or,
// it will reject, if handler() fails along the way).
await finished;

7.2.5.2 The Navigation interface

The following are the event handlers (and their corresponding event handler event types) supported, as event handler IDL attributes, by all objects implementing the Navigation interface:

7.2.5.3 Core infrastructure

A key type used throughout the navigation API is the NavigationType enumeration:

This captures the main web developer-visible types of "navigations", which (as noted elsewhere) do not exactly correspond to this standard's singular navigate algorithm. The meaning of each value is the following:

"push"

Corresponds to calls to navigate where the history handling behavior ends up as "push", or to history.pushState().

"replace"

Corresponds to calls to navigate where the history handling behavior ends up as "replace", or to history.replaceState().

"reload"

Corresponds to calls to reload.

"traverse"

Corresponds to calls to traverse the history by a delta.

7.2.5.4 The NavigationHistoryEntry interface

entry.url

The URL of this navigation history entry.

This can return null if the entry corresponds to a different Document than the current one (i.e., if sameDocument is false), and that Document was fetched with a referrer policy of "no-referrer" or "origin", since that indicates the Document in question is hiding its URL even from other same-origin pages.

entry.key

A user agent-generated random UUID string representing this navigation history entry's place in the navigation history list. This value will be reused by other NavigationHistoryEntry instances that replace this one due to "replace" navigations, and will survive reloads and session restores.

This is useful for navigating back to this entry in the navigation history list, using navigation.traverseTo(key).

entry.id

A user agent-generated random UUID string representing this specific navigation history entry. This value will not be reused by other NavigationHistoryEntry instances. This value will survive reloads and session restores.

This is useful for associating data with this navigation history entry using other storage APIs.

entry.index

The index of this NavigationHistoryEntry within navigation.entries(), or −1 if the entry is not in the navigation history entry list.

entry.sameDocument

Indicates whether or not this navigation history entry is for the same Document as the current one, or not. This will be true, for example, when the entry represents a fragment navigation or single-page app navigation.

entry.getState()

Returns the deserialization of the state stored in this entry, which was added to the entry using navigation.navigate() or navigation.updateCurrentEntry(). This state survives reloads and session restores.

Note that in general, unless the state value is a primitive, entry.getState() !== entry.getState(), since a fresh deserialization is returned each time.

This state is unrelated to the classic history API's history.state.

The following are the event handlers (and their corresponding event handler event types) supported, as event handler IDL attributes, by all objects implementing the NavigationHistoryEntry interface:

7.2.5.5 The history entry list

entries = navigation.entries()

Returns an array of NavigationHistoryEntry instances represent the current navigation history entry list, i.e., all session history entries for this navigable that are same origin and contiguous to the current session history entry.

navigation.currentEntry

Returns the NavigationHistoryEntry corresponding to the current session history entry.

navigation.updateCurrentEntry({ state })

Updates the navigation API state of the current session history entry, without performing a navigation like navigation.reload() would do.

This method is best used to capture updates to the page that have already happened, and need to be reflected into the navigation API state. For cases where the state update is meant to drive a page update, instead use navigation.navigate() or navigation.reload(), which will trigger a navigate event.

navigation.canGoBack

Returns true if the current current session history entry (i.e., currentEntry) is not the first one in the navigation history entry list (i.e., in entries()). This means that there is a previous session history entry for this navigable, and its document state's origin is same origin with the current Document's origin.

navigation.canGoForward

Returns true if the current current session history entry (i.e., currentEntry) is not the last one in the navigation history entry list (i.e., in entries()). This means that there is a next session history entry for this navigable, and its document state's origin is same origin with the current Document's origin.

7.2.5.6 Initiating navigations

{ committed, finished } = navigation.navigate(url)

{ committed, finished } = navigation.navigate(url, options)

Navigates the current page to the given url. options can contain the following values:

• history can be set to "replace" to replace the current session history entry, instead of pushing a new one.

• info can be set to any value; it will populate the info property of the corresponding NavigateEvent.

• state can be set to any serializable value; it will populate the state retrieved by navigation.currentEntry.getState() once the navigation completes, for same-document navigations. (It will be ignored for navigations that end up cross-document.)

By default this will perform a full navigation (i.e., a cross-document navigation, unless the given URL differs only in a fragment from the current one). The navigateEvent.intercept() method can be used to convert it into a same-document navigation.

The returned promises will behave as follows:

• For navigations that get aborted, both promises will reject with an "AbortError" DOMException.

• For same-document navigations created by using the navigateEvent.intercept() method, committed will fulfill immediately, and finished will fulfill or reject according to any promsies returned by handlers passed to intercept().

• For other same-document navigations (e.g., non-intercepted fragment navigations), both promises will fulfill immediately.

• For cross-document navigations, or navigations that result in 204 or 205 statuses or `Content-Disposition: attachment` header fields from the server (and thus do not actually navigate), both promises will never settle.

In all cases, when the returned promises fulfill, it will be with the NavigationHistoryEntry that was navigated to.

{ committed, finished } = navigation.reload(options)

Reloads the current page. options can contain info and state, which behave as described above.

The default behavior of performing a from-network-or-cache reload of the current page can be overriden by the using the navigateEvent.intercept() method. Doing so will mean this call only updates state or passes along the appropriate info, plus performing whater actions the navigate event handlers see fit to carry out.

The returned promises will behave as follows:

• If the reload is intercepted by using the navigateEvent.intercept() method, committed will fulfill immediately, and finished will fulfill or reject according to any promsies returned by handlers passed to intercept().

• Otherwise, both promises will never settle.

{ committed, finished } = navigation.traverseTo(key)

{ committed, finished } = navigation.traverseTo(key, { info })

Traverses to the closest session history entry that matches the NavigationHistoryEntry with the given key. info can be set to any value; it will populate the info property of the corresponding NavigateEvent.

If a traversal to that session history entry is already in progress, then this will return the promises for that original traversal, and info will be ignored.

The returned promises will behave as follows:

• If there is no NavigationHistoryEntry in navigation.entries() whose key matches key, both promises will reject with an "InvalidStateError" DOMException.

• For same-document traversals intercepted by the navigateEvent.intercept() method, committed will fulfill as soon as the traversal is processed and navigation.currentEntry is updated, and finished will fulfill or reject according to any promsies returned by the handlers passed to intercept().

• For non-intercepted same-document travesals, both promises will fulfill as soon as the traversal is processed and navigation.currentEntry is updated.

• For cross-document traversals, including attempted cross-document traversals that end up resulting in a 204 or 205 statuses or `Content-Disposition: attachment` header fields from the server (and thus do not actually traverse), both promises will never settle.

{ committed, finished } = navigation.back(key)

{ committed, finished } = navigation.back(key, { info })

Traverses to the closest previous session history entry which results in this navigable traversing, i.e., which corresponds to a different NavigationHistoryEntry and thus will cause navigation.currentEntry to change. info can be set to any value; it will populate the info property of the corresponding NavigateEvent.

If a traversal to that session history entry is already in progress, then this will return the promises for that original traversal, and info will be ignored.

The returned promises behave equivalently to those returned by traverseTo().

{ committed, finished } = navigation.forward(key)

{ committed, finished } = navigation.forward(key, { info })

Traverses to the closest forward session history entry which results in this navigable traversing, i.e., which corresponds to a different NavigationHistoryEntry and thus will cause navigation.currentEntry to change. info can be set to any value; it will populate the info property of the corresponding NavigateEvent.

If a traversal to that session history entry is already in progress, then this will return the promises for that original traversal, and info will be ignored.

The returned promises behave equivalently to those returned by traverseTo().

7.2.5.7 Ongoing navigation tracking

navigation.transition

A NavigationTransition representing any ongoing navigation that hasn't yet reached the navigatesuccess or navigateerror stage, if one exists; or null, if there is no such transition ongoing.

Since navigation.currentEntry (and other properties like location.href) are updated immediately upon navigation, this navigation.transition property is useful for determining when such navigations are not yet fully settled, according to any handlers passed to navigateEvent.intercept().

navigation.transition.navigationType

One of "push", "replace", "reload", or "traverse", indicating what type of navigation this transition is for.

navigation.transition.from

The NavigationHistoryEntry from which the transition is coming. This can be useful to compare against navigation.currentEntry.

navigation.transition.finished

A promise which fulfills at the same time as the navigatesuccess fires, or rejects at the same time the navigateerror event fires.

7.2.5.8 The navigate event

A major feature of the navigation API is the navigate event. This event is fired on any navigation (in the broad sense of the word), allowing web developers to monitor such outgoing navigations. In many cases, the event is cancelable, which allows preventing the navigation from happening. And in others, the navigation can be intercepted and replaced with a same-document navigation by using the intercept() method of the NavigateEvent class.

7.2.5.8.1 The NavigateEvent interface

event.navigationType

One of "push", "replace", "reload", or "traverse", indicating what type of navigation this is.

event.destination

A NavigationDestination representing the destination of the navigation.

event.canIntercept

True if intercept() can be called to intercept this navigation and convert it into a same-document navigation, replacing its usual behavior; false otherwise.

Generally speaking, this will be true whenever the current Document can have its URL rewritten to the destination URL, except for in the case of cross-document "traverse" navigations, where it will always be false.

event.userInitiated

True if this navigation was due to a user clicking on an a element, submitting a form element, or using the browser UI to navigate; false otherwise.

event.hashChange

True for a fragment navigation; false otherwise.

event.signal

An AbortSignal which will become aborted if the navigation gets canceled, e.g., by the user pressing their browser's "Stop" button, or by another navigation interrupting this one.

The expected pattern is for developers to pass this along to any async operations, such as fetch(), which they perform as part of handling this navigation.

event.formData

The FormData representing the submitted form entries for this navigation, if this navigation is a "push" or "replace" navigation representing a POST form submission; null otherwise.

(Notably, this will be null even for "reload" or "traverse" navigations that are revisiting a session history entry that was originally created from a form submission.)

event.downloadRequest

Represents whether or not this navigation was requested to be a download, by using an a or area element's download attribute:

• If a download was not requested, then this property is null.

• If a download was requested, returns the filename that was supplied as the download attribute's value. (This could be the empty string.)

Note that a download being requested does not always mean that a download will happen: for example, a download might be blocked by browser security policies, or end up being treated as a "push" navigation for unspecified reasons.

Similarly, a navigation might end up being a download even if it was not requested to be one, due to the destination server responding with a `Content-Disposition: attachment` header.

Finally, note that the navigate event will not fire at all for downloads initiated using browser UI affordances, e.g., those created by right-clicking and choosing to save the target of a link.

event.info

An arbitrary JavaScript value passed via one of the navigation API methods which initiated this navigation, or undefined if the navigation was initiated by the user or by a different API.

event.hasUAVisualTransition

ユーザーエージェントが、このイベントをディスパッチする前に、このナビゲーションのビジュアルトランジションを実行した場合、trueを返す。trueの場合、著者がDOMをナビゲーション後の状態に同期的に更新するならば、最高のユーザーエクスペリエンスが得られる。

event.intercept({ handler, focusReset, scroll })

Intercepts this navigation, preventing its normal handling and instead converting it into a same-document navigation of the same type to the destination URL.

The handler option can be a function that returns a promise. The handler function will run after the navigate event has finished firing, and the navigation.currentEntry property has been synchronously updated. This returned promise is used to signal the duration, and success or failure, of the navigation. After it settles, the browser signals to the user (e.g., via a loading spinner UI, or assistive technology) that the navigation is finished. Additionally, it fires navigatesuccess or navigateerror events as appropriate, which other parts of the web application can respond to.

By default, using this method will cause focus to reset when any handlers' returned promises settle. Focus will be reset to the first element with the autofocus attribute set, or the body element if the attribute isn't present. The focusReset option can be set to "manual" to avoid this behavior.

By default, using this method will delay the browser's scroll restoration logic for "traverse" or "reload" navigations, or its scroll-reset/scroll-to-a-fragment logic for "push" or "replace" navigations, until any handlers' returned promises settle. The scroll option can be set to "manual" to turn off any browser-driven scroll behavior entirely for this navigation, or scroll() can be called before the promise settles to trigger this behavior early.

This method will throw a "SecurityError" DOMException if canIntercept is false, or if isTrusted is false. It will throw an "InvalidStateError" DOMException if not called synchronously, during event dispatch.

event.scroll()

For "traverse" or "reload" navigations, restores the scroll position using the browser's usual scroll restoration logic.

For "push" or "replace" navigations, either resets the scroll position to the top of the document or scrolls to the fragment specified by destination.url if there is one.

If called more than once, or called after automatic post-transition scroll processing has happened due to the scroll option being left as "after-transition", or called before the navigation has committed, this method will throw an "InvalidStateError" DOMException.

7.2.5.8.2 The NavigationDestination interface

event.destination.url

The URL being navigated to.

event.destination.key

The value of the key property of the destination NavigationHistoryEntry, if this is a "traverse" navigation, or the empty string otherwise.

event.destination.id

The value of the id property of the destination NavigationHistoryEntry, if this is a "traverse" navigation, or the empty string otherwise.

event.destination.index

The value of the index property of the destination NavigationHistoryEntry, if this is a "traverse" navigation, or −1 otherwise.

event.destination.sameDocument

Indicates whether or not this navigation is to the same Document as the current one, or not. This will be true, for example, in the case of fragment navigations or history.pushState() navigations.

Note that this property indicates the original nature of the navigation. If a cross-document navigation is converted into a same-document navigation using navigateEvent.intercept(), that will not change the value of this property.

event.destination.getState()

For "traverse" navigations, returns the deserialization of the state stored in the destination session history entry.

For "push" or "replace" navigations, returns the deserialization of the state passed to navigation.navigate(), if the navigation was initiated by that method, or undefined it if it wasn't.

For "reload" navigations, returns the deserialization of the state passed to navigation.reload(), if the reload was initiated by that method, or undefined it if it wasn't.

7.2.6 イベントインターフェイス

NavigateEventインターフェイスには、その複雑さのために独自の専用セクションを持つ。

7.2.6.1 The NavigationCurrentEntryChangeEvent interface

event.navigationType

Returns the type of navigation which caused the current entry to change, or null if the change is due to navigation.updateCurrentEntry().

event.from

Returns the previous value of navigation.currentEntry, before the current entry changed.

If navigationType is null or "reload", then this value will be the same as navigation.currentEntry. In that case, the event signifies that the contents of the entry changed, even if we did not move to a new entry or replace the current one.

7.2.6.2 PopStateEventインターフェイス

event.state

pushState()またはreplaceState()へ提供される情報のコピーを返す。

event.hasUAVisualTransition

ユーザーエージェントが、このイベントをディスパッチする前に、このナビゲーションのビジュアルトランジションを実行した場合、trueを返す。trueの場合、著者がDOMをナビゲーション後の状態に同期的に更新するならば、最高のユーザーエクスペリエンスが得られる。

7.2.6.3 HashChangeEventインターフェイス

event.oldURL

以前に現在であったセッション履歴のエントリーのURLを返す。

event.newURL

今現在であるセッション履歴のエントリーのURLを返す。

7.2.6.4 PageTransitionEventインターフェイス

event.persisted

pageshowに対して、ページが新しく読み込まれている（およびloadイベントが発生する）場合にfalseを返す。そうでなければ、trueを返す。

pagehideイベントに対して、ページが最後の時間まで出かける場合はfalseを返す。そうでなければtrueを返す。これは、ユーザーがこのページに戻った場合（Documentのsalvageable状態がtrueのままの場合）にページが再利用される可能性があることを意味する。

ページがサルベージ不能になる原因には、次のものがある：

• ユーザーエージェントが、アンロード後にセッション履歴エントリーでDocumentを存続させないことを決定した
• salvageableではないiframeを持っている
• アクティブなWebSocketオブジェクト
• Documentの中止

7.2.6.5 BeforeUnloadEventインターフェイス

BeforeUnloadEvent固有の初期化メソッドは存在しない。

BeforeUnloadEventインターフェイスは、イベントをキャンセルするだけでなく、returnValue属性を空文字列以外の値に設定することで、アンロードがキャンセルされたかどうかをチェックできるようにするレガシーインターフェイスである。著者は、returnValueを使用する代わりに、preventDefault()メソッド、またはイベントをキャンセルするその他の手段を使用すべきである。