Wiki_History_API - inoueshinichi/Wiki_Web GitHub Wiki

History API

  • ブラウザのセッション履歴, 現在のページが読み込まれたタブ・フレームで訪問したページを操作する.

参考

プロパティ

プロパティ 説明
window.history.length ページのスタック（履歴）数. 新しいタブでロードしたページのこのプロパティは1.
window.history.scrollRestoration ページ復元時にスクロール状態も復元するか否か(auto or manual)
window.state 履歴スタックの最上位を覗き見(Peek)する(any型)

メソッド

メソッド 機能
window.history.back() 非同期処理 ブラウザの戻るボタンと同じ効果
window.history.go(-1) window.history.back()と同じ
window.history.forward() 非同期処理 ブラウザの進むボタンと同じ効果
window.history.go(1) 非同期処理 window.history.forward()と同じ効果
window.history.go(int) 現在のページから相対位置指定で移動する. 履歴スタックの範囲外を指定した場合, 何も起きない.
window.history.pushState({obj}, {title}, {url}) 指定したデータ(obj), タイトル, URLをセッション履歴に追加する.
window.history.replaceState({obj}, {title}, {url}) 履歴スタックの最上位項目を指定したデータ(obj),タイトル,URLで更新する
  • safariブラウザ以外はタイトル引数を無視する

履歴項目の追加と修正

  • 下記3つが主役
  • pushState({obj}, {title}, {url})メソッド
  • replaceState({obj}, {title}, {url})メソッド
  • "popstate"イベント

注意点

pushState({obj}, {title}, {url})メソッドを使うことで,
履歴状態を変更した後に生成されるXMLHttpRequestオブジェクトの
HTTPヘッダーの中のリファラも変更される.
リファラはXHRが生成された時点でthisとなるウィンドウのURLとなる. 

// e.g. 

const stateObj = { foo: "bar" };
window.history.pushState(stateObj, "title", "https://mozilla.org/bar.html");
  • 上記コードがhttps://mozilla.org/foo.htmlで実行されたと想定.
  • URLバーにはhttps://mozila.org/bar.htmlと表示されるが, ブラウザーはbar.htmlをLoadすることはなく, その存在チェックもしない.
  • ユーザーがhttps://google.comに移動し, それから「戻る」ボタンをクリックした時, URLバーはhttps://mozilla.org/bar.htmlを表示する.
  • window.history.stateは、stateObjになる.
  • "popstate"イベントは, ページの再ロードのみで有効なため, pushState({obj}, {title}, {url}), replaceState({obj}, {title}, {url})では発行されない.
                     URLスタック
          --------------------------------
          |                              |
          --------------------------------
          |.                             |
          --------------------------------
          |.                             |
          --------------------------------
 URLバー → | https://mozilla.org/foo.html | ← 表示ページ
          --------------------------------
   
                        ↓ window.history.pushState({}, '', "https://mozilla.org/bar.html");

                     URLスタック
          --------------------------------
          |                              |
          --------------------------------
          |.                             |
          --------------------------------
 URLバー → | https://mozilla.org/bar.html |
          --------------------------------
          | https://mozilla.org/foo.html | ← 表示ページ
          --------------------------------

                        ↓ <a href="https://google.com"></a>

                     URLスタック
          --------------------------------
          |                              |
          --------------------------------
 URLバー → | https://google.com/          | ← 表示ページ
          --------------------------------
          | https://mozilla.org/bar.html |
          --------------------------------
          | https://mozilla.org/foo.html | 
          --------------------------------

                         ↓ window.history.back()

                     URLスタック
          --------------------------------
          |                              |
          --------------------------------
          |                              | 
          --------------------------------
 URLバー → | https://mozilla.org/bar.html | ← 表示ページ // window.history.pushState()でスタックされたものが, 
          --------------------------------            // popされる時, "popstate"イベントが発生する.
          | https://mozilla.org/foo.html | 
          --------------------------------

                        ↓ window.history.back()

                     URLスタック
          --------------------------------
          |                              |
          --------------------------------
          |                              | 
          --------------------------------
          |                              | // "popstate"イベントが発生!
          -------------------------------- // この時, window.history.stateは`null`になる.
 URLバー → | https://mozilla.org/foo.html | ← 表示ページ
          --------------------------------

window.history.pushState({obj}, {title}, {url})メソッド

  • window.history.pushState(URLに紐づけるJSの状態オブジェクト, タイトル, URL)
  • key(URL)-value(状態オブジェクト)としてホストPCのディスクに保存される. Max 640KB.
  • 640KB以上を格納しようとすると, 例外が発生する.
  • 640KB以上の大きなデータは, Storageオブジェクト(sessionStorage/localStorage)を用いる.
  • タイトルは, Safari以外は空文字を入れる. 状態を示す識別し(tag)の役割をする.
  • URLは, 新しいURL. pushState()で追加してもすぐに, ブラウザは, URLが示す先の静的ファイル(.html,.css,*.js)を読み込まない.
  • 上記の状態で, ブラウザの再起動を行うと読み込みが発生するかもしれない.
  • URLを指定しなかった場合, 現在ページのURLが自動で入る.
  • window.history.pushState({...}, '', 'URL')は`window.location = 'URL'と同等.
  • 上記の2つの方式は, どちらも現在の文書に関連する別履歴項目の生成と有効化を行う. React-Router-Domの内部実装.

window.history.pushState({obj}, {title}, {url})のメリット

  • 同一オリジンであれば, どんなURLにも飛べる.
  • window.locationは, 同じdocumentのままでハッシュの変更のみ可能.
  • [補足] URLハッシュ(URLフラグメント)は, URLの末尾に~/path/to#{anchor}と記述でき, ユーザがhtmlファイルを参照した際に`<タグ id="{anchor}"></タグ>が記述されている箇所まで一気に飛べる仕組み.
  • URLに状態オブジェクトを関連づけることができる.
  • window.locationは, オブジェクトをURLエンコードしてURL文字列に埋め込む必要がある.
  • window.locationは, 現在のURLハッシュが~/path/to#fooの場合, 必ず別の~/path/to#barを指定しなければならない.
  • 一方, window.history.pushState()は, 必ずしもURLハッシュの指定を必要としない.

window.history.replaceState({obj}, {title}, {url})メソッド

const stateObj = { foo: 'bar' };
window.history.pushState(stateObj, "", "http://domain/bar.html");

                     URLスタック
          --------------------------------
          |                              |
          --------------------------------
          |                              |
          --------------------------------
          |                              |
          --------------------------------
 URLバー → | https://mozilla.org/foo.html | ← 表示ページ
          --------------------------------
   
                        ↓ window.history.pushState({}, '', "https://mozilla.org/bar.html");

                     URLスタック
          --------------------------------
          |                              |
          --------------------------------
          |                              |
          --------------------------------
          | https://mozilla.org/bar.html |
          --------------------------------
 URLバー → | https://mozilla.org/foo.html | ← 表示ページ
          --------------------------------

                        ↓ ユーザ側(ブラウザ)でhttps://mozilla.org/bar.htmlを表示する
   
                     URLスタック
          --------------------------------
          |                              |
          --------------------------------
          |                              |
          --------------------------------
 URLバー → | https://mozilla.org/bar.html | ← 表示ページ
          --------------------------------
          | https://mozilla.org/foo.html | 
          --------------------------------
   
                        ↓ window.history.replaceState({}, '', "https://mozilla.org/bar2.html"
   
                     URLスタック
          --------------------------------
          |                              |
          --------------------------------
          |                              |
          ----------------------------------------------------------------
 URLバー → | https://mozilla.org/bar.html | https://mozilla.org/bar2.html | ← 表示ページ
          ----------------------------------------------------------------
          | https://mozilla.org/foo.html | 
          --------------------------------
   
                        ↓ <a href="https://microsoft.con"></a>

                     URLスタック
          --------------------------------
          |                              |
          --------------------------------
 URLバー → | https://microsoft.com        | ← 表示ページ
          ----------------------------------------------------------------
          | https://mozilla.org/bar.html | https://mozilla.org/bar2.html |
          ----------------------------------------------------------------
          | https://mozilla.org/foo.html | 
          --------------------------------

                       ↓ window.history.back()

                    URLスタック
          --------------------------------
          |                              |
          --------------------------------
          | https://microsoft.com.       |
          --------------------------------
 URLバー → | https://mozilla.org/bar2.html | ← 表示ページ (bar.html -> bar2.html)
          --------------------------------
          | https://mozilla.org/foo.html | 
          --------------------------------

posstateイベント

  • アクティブな履歴項目が変更されるたびにブラウザウィンドウにposstateイベントが発行される.
  • pushState() or replaceState()によって変更項目が作成されている場合, popstate.stateは, stateのコピーとなる.

現在の状態を読み取る

ページのLoad時にwindow.history.stateがnullでない場合(pushStateまたはreplaceStateで作成したもの),
ブラウザの再起動などでページをLoadすると, window(ブラウザのタブ)は, onloadイベントを受け取るが, popstateイベントは受け取らない.
この場合, window.history.state経由でstateを取得すべし.

⚠️ **GitHub.com Fallback** ⚠️