プログラミング

History API のメモ

投稿日:2019年2月13日 更新日:

History API についての簡単な説明を書きました。

「History API の概要を思い出したくなった時に、ざっと眺める」というのがこのページの主な目的です。

1. History API とは?

ウェブブラウザでウェブページを閲覧している際のページ遷移履歴を管理・操作するための API です。

参考

2. History インタフェースの定義

HTML Standard – 7.7.2 The History interface から引用

enum ScrollRestoration { "auto", "manual" };

[Exposed=Window]
interface History {
  readonly attribute unsigned long length;
  attribute ScrollRestoration scrollRestoration;
  readonly attribute any state;
  void go(optional long delta = 0);
  void back();
  void forward();
  void pushState(any data, DOMString title, optional USVString? url = null);
  void replaceState(any data, DOMString title, optional USVString? url = null);
};

3. 主なメソッドの説明

window.history.go( [ delta ] )

  • セッション履歴内の指定されたステップ数だけ前または後ろに進みます。
  • deltaがゼロの場合は現在のページをリロードします。
  • delta が範囲外の場合は、何もしません。

window.history.back()

  • セッション履歴内の1つ後ろ戻ります。
  • 後ろのページがなければ何もしません。

window.history.forward()

  • セッション履歴内の1つ次に進みます。
  • 次のページがなければ何もしません。

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

  • 「stateデータ」「タイトル」「URL(あれば)」をセッション履歴に追加します。
  • それに合わせて、セッション履歴内の位置が1つ進められます(現在位置が追加した履歴になります)。(ここで [戻る] 操作をすると、先程までのページに戻ります)
  • 引数にセットした url に移動するわけではありません
  • 第三引数の url は、 現在の URLと same origin でなければなりません。指定されなかった場合は現在のドキュメントの URL が設定されます。

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

  • 「stateデータ」「タイトル」「URL(あれば)」で、セッション履歴の現在のエントリを更新します。
  • pushState() と異なり、 replaceState() は新しく履歴エントリを作成する代わりに現在の履歴エントリを修正します。

※ 主に HTML Standard – 7.7.2 The History interface の文章を翻訳しています。
※ 一部、ブラウザの履歴を操作する – ウェブデベロッパーガイド | MDN の文章も引用しています。

4. onpopstate イベントと移動系メソッドの動作例

popstate イベントは、同じ文書の2つの履歴項目の間で、アクティブな履歴項目が変わるたびにウィンドウに発行されます(引用元:WindowEventHandlers.onpopstate – Web API | MDN)。

WindowEventHandlers.onpopstate – Web API | MDN に載っているサンプルコードに説明を追加してみました。

window.onpopstate = function(event) {
  console.log("location: " + document.location + ", state: " + JSON.stringify(event.state));
};

// この時点の状態が (1) です

history.pushState({page: 1}, "title 1", "?page=1"); // (2) 履歴が1つ進む
history.pushState({page: 2}, "title 2", "?page=2"); // (3) 履歴が1つ進む
history.replaceState({page: 3}, "title 3", "?page=3"); // (4) 現在の履歴が入れ替わる
history.back(); // (5) alerts "location: http://example.com/example.html?page=1, state: {"page":1}"
history.back(); // (6) alerts "location: http://example.com/example.html, state: null
history.go(2);  // (7) alerts "location: http://example.com/example.html?page=3, state: {"page":3}

この時の履歴の状態変化を以下に示します。

(1) [最初のページ]
         
(2) [最初のページ] → [title 1]
                        
(3) [最初のページ] → [title 1] → [title 2]
                                     
(4) [最初のページ] → [title 1] → [title 3]
                                     
(5) [最初のページ] → [title 1] → [title 3]
                        
(6) [最初のページ] → [title 1] → [title 3]
         
(6) [最初のページ] → [title 1] → [title 3]
                                     
  • 最初のコードのコメントに入れてある (1) から (6) に対応しています。
  • 上矢印 () が現在いるページです。

📂-プログラミング

執筆者:labo


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

関連記事

Web Programming

アクセス元のグローバルIPアドレスが表示されるだけのWebページを作る (Content-Type を変えた2種類)(PHP利用)

目次1. はじめに2. 手順(HTMLバージョン)(1) ウェブサーバー上にディレクトリを用意します(2) index.php ファイルを作成します(3) この Webページにアクセスします3. 手順 …

JavaScript でスロットマシーンを作ってみました

JavaScript でスロットマシーンを作ってみました。 目次1. スクリーンショット2. デモページ3. 内容4. ソースコード5. 参考情報 1. スクリーンショット スクリーンショット 2. …

QRコードの画像ファイルから内容を読み取るWebページを作りました

目次1. はじめに2. スクリーンショット3. URL4. 操作と内容5. ソースコード6. 参考情報 1. はじめに QRコードの画像ファイルから内容を読み取る を作りました。 2. スクリーンショ …

Web Programming

ブラウザがウェブサーバーに送っている情報を表示するウェブページを作ってみよう(HTML/CSS/JavaScript/PHP)

目次1. はじめに2. この記事の対象とする人3. 今回の題材となるWebページとファイル3-1. 作成するページ3-2. 今回の題材となるファイルファイルのダウンロードファイルを閲覧する4. 利用す …

React Redux

React + Redux の最小限の雛形コード

この記事に載せている JavaScriptのコードは、React + Redux を使っています。 但し、まだ何も意味のある処理を書いていないので、このままだと 属性 id=”root” を持った要素 …