1. 7.7 セッション履歴およびナビゲーション
      1. 7.1 ブラウジングセッション
      2. 7.7.2 ブラウジングコンテキストのセッション履歴
      3. 7.7.3 Historyインターフェイス
      4. 7.7.4 Locationインターフェイス

7.7 セッション履歴およびナビゲーション

History/back

Support in all current engines.

Firefox1+Safari4+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer10+
Firefox Android4+Safari iOS3+Chrome Android18+WebView Android1+Samsung Internet1.0+Opera Android12.1+

History/forward

Support in all current engines.

Firefox1+Safari4+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer10+
Firefox Android4+Safari iOS3+Chrome Android18+WebView Android1+Samsung Internet1.0+Opera Android12.1+

7.1 ブラウジングセッション

ブラウジングセッションは…である。 ブラウジングセッションの定義については、whatwg/html issue #4782およびwhatwg/html issue #5350を参照のこと。 `Cross-Origin-Opener-Policy`ヘッダーまたはナビゲーションのために置き換えることができないことを除いて、これはトップレベルブラウジングコンテキストにほぼ類似している。

トップレベルブラウジングコンテキストには、ブラウジングセッションであるブラウジングセッションが関連付けられている。

環境設定オブジェクトenvironmentブラウジングセッションは、次の手順を実行した結果である:

  1. アサート:environment責任ある文書を持つ。

  2. environment責任ある文書ブラウジングコンテキストトップレベルブラウジングコンテキストブラウジングセッションを返す。

7.7.2 ブラウジングコンテキストのセッション履歴

ブラウジングコンテキスト内のDocumentの配列は、そのセッション履歴である。子ブラウジングコンテキストを含む各ブラウジングコンテキストは、個別のセッション履歴を持つ。ブラウジングコンテキストのセッション履歴は、セッション履歴のエントリーのフラットなリストから成る。

ブラウジングコンテキストセッション履歴における各Documentオブジェクトは、同じ基礎となるセッション履歴をすべてモデル化しなければならない、一意なHistoryオブジェクトに関連付けられる。


セッション履歴エントリーは、以下のアイテムをもつ構造体である:

シリアライズされた状態は、ユーザーインターフェイスの状態を表すオブジェクトを(StructuredSerializeForStorage経由で)シリアライズしたものである。非公式に"状態オブジェクト"と呼ぶこともあるが、これは著者から提供されたユーザーインターフェイスの状態を表すオブジェクトであり、あるいは、シリアライズされた状態をデシリアライズ(StructuredDeserialize経由で)して作成されたオブジェクトでもある。

ページは、シリアライズされた状態をセッション履歴に追加することができる。ユーザー(またはスクリプト)が履歴に戻るとき、これらはデシリアイズされスクリプトに返されるため、著者は1ページのアプリケーションでも"ナビゲーション"メタファーを使用できるようになる。

シリアライズされた状態は、主に2つの目的で使用されることを意図している:1つは、事前に準備された状態の記述をURLに格納することで、単純な場合には著者が解析を行う必要がないようにすることである(ただし、ユーザーによって渡されたURLを処理するためには解析が必要になるので、マイナーな最適化に過ぎない)。もう1つは、現在のDocumentインスタンスにのみ適用され、新しい Documentを開いた場合に再構築しなければならないため、URL には保存されないような状態を作者が保存できるようにすることである。

後者の例は、ユーザーが戻った場合同じ場所にアニメーションさせることができるように、ポップアップdivがアニメーション化するために作られた正確な座標を追跡するようなものになるだろう。またその代わりに、前後に行くときに、情報が再度フェッチする必要がないよう、URL内の情報に基づいてサーバーからフェッチされるデータのキャッシュにポインターを保持するために使用できる。

History/scrollRestoration

Support in all current engines.

Firefox46+Safari11+Chrome46+
Opera33+Edge79+
Edge (Legacy)NoInternet ExplorerNo
Firefox Android46+Safari iOS11+Chrome Android46+WebView Android46+Samsung Internet5.0+Opera Android33+

スクロール復元モードは、エントリーに移動するときに、ユーザーエージェントが永続化されたスクロール位置(存在する場合)を復元すべきかどうかを示す。スクロール復元モードは次のいずれかである:

"auto"
ユーザーエージェントは、ナビゲーション時にスクロール位置を復元する責任がある。
"manual"
ページはスクロール位置を復元する責任があり、ユーザーエージェントは自動的に復元を試みない。

セッション履歴内の複数の連続したエントリーは、同じ文書を共有することができる。これは、通常のナビゲーションを介して最初のエントリーに到達し、かつhistory.pushState()を介して次のエントリーが追加された場合に発生する可能性がある。または、フラグメントへのナビゲーションを介して発生する可能性がある。

同じDocumentを共有する(したがって、特定の文書の単に異なる状態である)すべてのエントリーは、定義により連続する。


任意の時点で、セッション履歴のエントリーの1つは、現在のエントリーである。これは、ブラウジングコンテキストアクティブ文書を表すエントリーである。現在のエントリーであるそれぞれのエントリーは、この仕様で定義されるアルゴリズムによって変更される。たとえばセッション履歴走査中など。

現在のエントリーは通常、ナビゲーション時に作成される最初のエントリーである。しかし、上記のように、同じ文書を共有する連続したエントリーの1つにすることもできる。

ブラウジングコンテキスト内の各Documentはまた、最新のエントリーを持つことができる。これは、ブラウジングコンテキストセッション履歴が最後にたどられたDocumentのエントリーである。 Documentが作成されるとき、最初は最新のエントリーを持たない。

7.7.3 Historyインターフェイス

History

Support in all current engines.

Firefox1+Safari1+Chrome1+
Opera3+Edge79+
Edge (Legacy)12+Internet Explorer10+
Firefox Android4+Safari iOS1+Chrome Android18+WebView Android1+Samsung Internet1.0+Opera Android10.1+

Window/history

Support in all current engines.

Firefox1+Safari1+Chrome1+
Opera3+Edge79+
Edge (Legacy)12+Internet Explorer4+
Firefox Android4+Safari iOS1+Chrome Android18+WebView Android1+Samsung Internet1.0+Opera Android10.1+
window . history . length

History/length

Support in all current engines.

Firefox1+Safari4+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer10+
Firefox Android4+Safari iOS3+Chrome Android18+WebView Android1+Samsung Internet1.0+Opera Android12.1+

ジョイントセッション履歴内のエントリーの数を返す。

window . history . scrollRestoration [ = value ]

セッション履歴の現在のエントリーのスクロール復元モードを返す。

セッション履歴の現在のエントリーのスクロール復元モードを変更する設定が可能である。

window . history . state

オブジェクトにデシリアライズされた、現在のシリアライズされた状態を返す。

window . history . go( [ delta ] )

History/go

Support in all current engines.

Firefox1+Safari4+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer10+
Firefox Android4+Safari iOS3+Chrome Android18+WebView Android1+Samsung Internet1.0+Opera Android12.1+

ジョイントセッション履歴内のステップの指定した数の前後に進む。

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

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

window . history . back()

ジョイントセッション履歴内の1つのステップに戻る。

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

window . history . forward()

ジョイントセッション履歴内の1つのステップに進む。

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

window . history . pushState(data, title [, url ] )

History/pushState

Support in all current engines.

Firefox4+Safari5+Chrome5+
Opera11.5+Edge79+
Edge (Legacy)12+Internet Explorer10+
Firefox Android4+Safari iOS4+Chrome Android18+WebView Android37+Samsung Internet1.0+Opera Android11.5+
caniuse.com table

指定されたURLが供給される場合、指定されたタイトルとともに、セッション履歴上に与えられたデータをプッシュする。

window . history . replaceState(data, title [, url ] )

History/replaceState

Support in all current engines.

Firefox4+Safari5+Chrome5+
Opera11.5+Edge79+
Edge (Legacy)12+Internet Explorer10+
Firefox Android4+Safari iOS4+Chrome Android18+WebView Android37+Samsung Internet1.0+Opera Android11.5+

指定されたデータ、タイトルおよび、提供される場合にURLを持つ、セッション履歴の現在のエントリーを更新する。

トップレベルブラウジングコンテキストジョイントセッション履歴は、ジョイントセッション履歴の現在のエントリーを除いて削除されたそれぞれのセッション履歴において現在のエントリーであるすべてのエントリーとともに、トップレベルブラウジングコンテキストを共有するすべての完全にアクティブなDocumentオブジェクトのすべてのブラウジングコンテキストに属するすべてのセッション履歴の結合である。

ジョイントセッション履歴の現在のエントリーは、最近そのセッション履歴内の現在のエントリーになったエントリーである。

ジョイントセッション履歴内のエントリーは、それぞれのセッション履歴に追加された時点で時系列に並べられる。各エントリーはインデックスを持つ。最古のエントリーのインデックスは0を持ち、後続のエントリーは連続して増加する整数(1、2、3など)を番号付けされる。

ブラウジングコンテキスト内の各Documentは、異なるイベントループがあるかもしれないので、ジョイントセッション履歴の実際の状態は、不明瞭にできる。たとえば、2つの兄弟iframe要素は、同時に1つの一意な生成元から別のものに互いに横断でき、それらの正確な順序は明確に定義されないかもしれない。それらは後にお互いを知るかもしれないので、同様に、それらはジョイントセッション履歴の長さについて同意しないかもしれない。

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

そのようなゲームで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, document.title, '?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にユーザーが移動するたびに解析する必要はないので、より便利な形式となる。

アプリケーションは、その時点で文書のtitle要素の値としてセッション履歴エントリーの同じタイトルを使用しないかもしれない。たとえば、これはtitle要素内のブロックを示す単純なページである。明らかに、後方に以前の状態に移動するときにユーザーは時間内に戻らず、したがって、セッション履歴のタイトルに時間を置くことは不適切だろう。

<!DOCTYPE HTML>
<HTML LANG=EN>
<TITLE>Line</TITLE>
<SCRIPT>
 setInterval(function () { document.title = 'Line - ' + new Date(); }, 1000);
 var i = 1;
 function inc() {
   set(i+1);
   history.pushState(i, 'Line - ' + i);
 }
 function set(newI) {
   i = newI;
   document.forms.F.I.value = newI;
 }
</SCRIPT>
<BODY ONPOPSTATE="set(event.state)">
<FORM NAME=F>
State: <OUTPUT NAME=I>1</OUTPUT> <INPUT VALUE="Increment" TYPE=BUTTON ONCLICK="inc()">
</FORM>

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

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

7.7.4 Locationインターフェイス

Document/location

Support in all current engines.

Firefox1+Safari1+Chrome1+
Opera3+Edge79+
Edge (Legacy)12+Internet Explorer4+
Firefox Android4+Safari iOS1+Chrome Android18+WebView Android1+Samsung Internet1.0+Opera Android10.1+

Location

Support in all current engines.

Firefox1+Safari1+Chrome1+
Opera3+Edge79+
Edge (Legacy)12+Internet Explorer3+
Firefox Android4+Safari iOS1+Chrome Android18+WebView Android1+Samsung Internet1.0+Opera Android10.1+

Window/location

Support in all current engines.

Firefox1+Safari1+Chrome1+
Opera3+Edge79+
Edge (Legacy)12+Internet Explorer4+
Firefox Android4+Safari iOS1+Chrome Android18+WebView Android1+Samsung Internet1.0+Opera Android10.1+

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

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

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

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

Locationオブジェクトは、Documentブラウジングコンテキストに属するアクティブ文書URLの表現を提供し、historyオブジェクトのエントリーを追加または置換することによって、ブラウジングコンテキストのセッション履歴の現在のエントリーを変更可能にする。

location . toString()
location . href

Location/href

Support in all current engines.

Firefox1+Safari1+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer3+
Firefox Android4+Safari iOS1+Chrome Android18+WebView Android1+Samsung Internet1.0+Opera Android12.1+

Location/toString

Support in all current engines.

Firefox22+Safari4+Chrome52+
Opera?Edge79+
Edge (Legacy)12+Internet Explorer11
Firefox Android22+Safari iOS3+Chrome Android52+WebView Android52+Samsung Internet6.0+Opera Android?

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

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

location . origin

Location/origin

Support in all current engines.

Firefox21+Safari5.1+Chrome8+
Opera15+Edge79+
Edge (Legacy)12+Internet Explorer11
Firefox Android21+Safari iOS5+Chrome Android18+WebView Android37+Samsung Internet1.0+Opera Android14+

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

location . protocol

Location/protocol

Support in all current engines.

Firefox1+Safari1+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer3+
Firefox Android4+Safari iOS1+Chrome Android18+WebView Android1+Samsung Internet1.0+Opera Android12.1+

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

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

location . host

Location/host

Support in all current engines.

Firefox1+Safari1+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer3+
Firefox Android4+Safari iOS1+Chrome Android18+WebView Android1+Samsung Internet1.0+Opera Android12.1+

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

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

location . hostname

Location/hostname

Support in all current engines.

Firefox1+Safari1+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer3+
Firefox Android4+Safari iOS1+Chrome Android18+WebView Android1+Samsung Internet1.0+Opera Android12.1+

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

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

location . port

Location/port

Support in all current engines.

Firefox1+Safari1+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer3+
Firefox Android4+Safari iOS1+Chrome Android18+WebView Android1+Samsung Internet1.0+Opera Android12.1+

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

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

location . pathname

Location/pathname

Support in all current engines.

Firefox1+Safari1+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer3+
Firefox Android4+Safari iOS1+Chrome Android18+WebView Android1+Samsung Internet1.0+Opera Android12.1+

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

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

location . search

Location/search

Support in all current engines.

Firefox1+Safari1+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer3+
Firefox Android4+Safari iOS1+Chrome Android18+WebView Android1+Samsung Internet1.0+Opera Android12.1+

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

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

location . hash

Location/hash

Support in all current engines.

Firefox1+Safari1+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer3+
Firefox Android4+Safari iOS1+Chrome Android18+WebView Android1+Samsung Internet1.0+Opera Android12.1+

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

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

location . assign(url)

Location/assign

Support in all current engines.

Firefox1+Safari3+Chrome1+
Opera3+Edge79+
Edge (Legacy)12+Internet Explorer5.5+
Firefox Android4+Safari iOS1+Chrome Android18+WebView Android1+Samsung Internet1.0+Opera Android10.1+

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

location . replace(url)

Location/replace

Support in all current engines.

Firefox1+Safari1+Chrome1+
Opera3+Edge79+
Edge (Legacy)12+Internet Explorer5.5+
Firefox Android4+Safari iOS1+Chrome Android18+WebView Android1+Samsung Internet1.0+Opera Android10.1+

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

location . reload()

Location/reload

Support in all current engines.

Firefox1+Safari1+Chrome1+
Opera3+Edge79+
Edge (Legacy)12+Internet Explorer5.5+
Firefox Android4+Safari iOS1+Chrome Android18+WebView Android1+Samsung Internet1.0+Opera Android10.1+

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

location . ancestorOrigins

Location/ancestorOrigins

FirefoxNoSafari6+Chrome20+
Opera15+Edge79+
Edge (Legacy)NoInternet ExplorerNo
Firefox AndroidNoSafari iOS6+Chrome Android25+WebView Android4.4+Samsung Internet1.5+Opera Android14+

親ブラウジングコンテキストからトップレベルブラウジングコンテキストまで、祖先ブラウジングコンテキストの生成元を列挙するDOMStringListオブジェクトを返す。