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 イベントインターフェイス
        1. 7.2.5.1 PopStateEventインターフェイス
        2. 7.2.5.2 HashChangeEventインターフェイス
        3. 7.2.5.3 PageTransitionEventインターフェイス
        4. 7.2.5.4 BeforeUnloadEventインターフェイス

7.2.1 Windowオブジェクト

Window

Support in all current engines.

Firefox1+Safari1+Chrome1+
Opera3+Edge79+
Edge (Legacy)12+Internet Explorer4+
Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android10.1+
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()を使用する。

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

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インターフェイス

Document/location

Support in all current engines.

Firefox1+Safari1+Chrome1+
Opera3+Edge79+
Edge (Legacy)12+Internet Explorer4+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android10.1+

Location

Support in all current engines.

Firefox1+Safari1+Chrome1+
Opera3+Edge79+
Edge (Legacy)12+Internet Explorer3+
Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android10.1+

Window/location

Support in all current engines.

Firefox1+Safari1+Chrome1+
Opera3+Edge79+
Edge (Legacy)12+Internet Explorer4+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android10.1+

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

document.location [ = value ]
window.location [ = value ]

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

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

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

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

Support in all current engines.

Firefox1+Safari1+Chrome1+
Opera3+Edge79+
Edge (Legacy)12+Internet Explorer10+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android10.1+

Window/history

Support in all current engines.

Firefox1+Safari1+Chrome1+
Opera3+Edge79+
Edge (Legacy)12+Internet Explorer4+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android10.1+
history.length

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

history.scrollRestoration

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

history.scrollRestoration = value

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

history.state

JavaScript値に逆シリアル化された、アクティブなセッション履歴エントリーシリアル化された状態を返す。

history.go()

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

history.go(delta)

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

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

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

history.back()

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

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

history.forward()

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

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

history.pushState(data, "")

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

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

history.pushState(data, "", url)

シリアル化された状態dataのシリアル化に設定し、URLurlに設定して、セッション履歴に新しいエントリーを追加する。

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

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

history.replaceState(data, "")

アクティブなセッション履歴エントリーシリアル化された状態dataの構造化されたクローンに更新する。

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

history.replaceState(data, "", url)

アクティブなセッション履歴エントリーシリアル化された状態dataの構造化されたクローンに更新し、そのURLurlに更新する。

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

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

document's URLtargetURLcan have its URL rewritten
https://example.com/homehttps://example.com/home#about
https://example.com/homehttps://example.com/home?page=shop
https://example.com/homehttps://example.com/shop
https://example.com/homehttps://user:pass@example.com/home
https://example.com/homehttp://example.com/home
file:///path/to/xfile:///path/to/x#hash
file:///path/to/xfile:///path/to/x?search
file:///path/to/xfile:///path/to/y
about:blankabout:blank#hash
about:blankabout:blank?search
about:blankabout:srcdoc
data:text/html,foodata:text/html,foo#hash
data:text/html,foodata:text/html,foo?search
data:text/html,foodata:text/html,bar
data:text/html,foodata:bar
blob:https://example.com/77becafe-657b-4fdc-8bd3-e83aaa5e8f43blob:https://example.com/77becafe-657b-4fdc-8bd3-e83aaa5e8f43#hash
blob:https://example.com/77becafe-657b-4fdc-8bd3-e83aaa5e8f43blob:https://example.com/77becafe-657b-4fdc-8bd3-e83aaa5e8f43?search
blob:https://example.com/77becafe-657b-4fdc-8bd3-e83aaa5e8f43blob:https://example.com/anything
blob:https://example.com/77becafe-657b-4fdc-8bd3-e83aaa5e8f43blob:path

DocumentURLのみが重要であり、その生成元は重要ではないことに注意する。継承された生成元をもつabout:blank Document、サンフォボックスiframe、またはdocument.domainセッターが使用されている場合のように、これらが一致しないことがある。

ユーザーはいくつかの座標に常にあり、ユーザーが後で再開するための特定の座標に対応するページをブックマークできるような、ユーザーがラインに沿って移動できるゲームを考える。

そのようなゲームでx=5位置を実装する静的ページは次のようになる:

<!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>

スクリプトをもたないシステムにおいて、前の例と同じように動作する。しかし、同じ体験に対するネットワークアクセスが存在しないので、スクリプトをサポートするユーザーは現在はるかに速く移動できる。さらに、経験に反して、ユーザーは単にナイーブなスクリプトベースのアプローチ、ブックマーク、およびセッション履歴の移動が依然として動作する必要がある。

上記の例において、pushState()メソッドへのdata引数は、サーバーに送信されるものと同じ情報であるが、スクリプトはURLにユーザーが移動するたびに解析する必要はないので、より便利な形式となる。

ほとんどのアプリケーションは、すべての履歴エントリーに同じスクロール復元モード値を使用したいと考えている。これを実現するために、できるだけ早くscrollRestoration属性を設定して(たとえば、文書のhead要素の最初のscript要素で)、履歴セッションに追加されたエントリーが確実に希望のスクロール復元モードになるようにする。

<head>
  <script>
       if ('scrollRestoration' in history)
            history.scrollRestoration = 'manual';
  </script>
</head>
   
7.2.5.1 PopStateEventインターフェイス

PopStateEvent

Support in all current engines.

Firefox4+Safari6+Chrome4+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer10+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+
event.state

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

7.2.5.2 HashChangeEventインターフェイス

HashChangeEvent

Support in all current engines.

Firefox3.6+Safari5+Chrome8+
Opera10.6+Edge79+
Edge (Legacy)12+Internet Explorer8+
Firefox Android?Safari iOS5+Chrome Android?WebView Android?Samsung Internet?Opera Android11+
event.oldURL

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

event.newURL

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

7.2.5.3 PageTransitionEventインターフェイス

PageTransitionEvent

Support in all current engines.

Firefox1.5+Safari5+Chrome4+
Opera?Edge79+
Edge (Legacy)12+Internet Explorer11
Firefox Android?Safari iOS4+Chrome Android?WebView Android37+Samsung Internet?Opera Android?
event.persisted

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

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

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

7.2.5.4 BeforeUnloadEventインターフェイス

BeforeUnloadEvent

Support in all current engines.

Firefox1.5+Safari7+Chrome30+
Opera?Edge79+
Edge (Legacy)12+Internet Explorer4+
Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet3.0+Opera Android?

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

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