KnowHub

履歴オブジェクト

概要

window.history プロパティは、現在のウィンドウの閲覧履歴を表す History オブジェクトを指します。

History オブジェクトには、現在のウィンドウがアクセスしたすべてのページの URL が保存されます。次のコードは、現在のウィンドウが合計 3 つの URL にアクセスしたことを示しています。

window.history.length // 3

セキュリティ上の理由から、ブラウザではスクリプトによるこれらのアドレスの読み取りは許可されていませんが、アドレス間のナビゲーションは許可されています。

// 前の URL に戻ります
履歴.back()

// と同等
歴史.go(-1)

ブラウザのツールバーの「進む」ボタンと「戻る」ボタンは、実際には History オブジェクトに対して動作します。

プロパティ

History オブジェクトには 2 つの主要なプロパティがあります。

  • History.length: 現在のウィンドウ (現在の Web ページを含む) でアクセスした URL の数
  • History.state: 履歴スタックの最上位にある状態の値 (詳細は以下を参照)
// 現在のウィンドウでアクセスした Web ページの数
window.history.length // 1

// History オブジェクトの現在の状態
// 通常は未定義、つまり設定されていません
window.history.state // 未定義

方法

History.back()、History.forward()、History.go()

これら 3 つの方法は、歴史を移動するために使用されます。

  • History.back(): 前の URL に移動します。これはブラウザの戻るボタンをクリックするのと同じです。最初にアクセスした URL の場合、このメソッドは効果がありません。
  • History.forward(): 次の URL に移動します。これはブラウザの進むボタンをクリックするのと同じです。最後にアクセスした URL の場合、このメソッドは効果がありません。
  • History.go(): 現在の URL に基づいて整数をパラメータとして受け取り、パラメータで指定された URL に移動します。たとえば、go(1) は forward() と同等です。 go(-1) back()` と同等。パラメータが実際の URL 範囲を超えている場合、このメソッドは効果がありません。パラメータが指定されていない場合、デフォルトのパラメータは「0」です。これは、現在のページを更新するのと同じです。
履歴.back();
履歴.forward();
履歴.go(-2);

history.go(0) は現在のページを更新することと同じです。

History.go(0); // 現在のページを更新します。

以前にアクセスしたページに移動する場合、通常、サーバーに新しい Web ページの送信を再度要求するのではなく、ページがブラウザーのキャッシュから読み込まれることに注意してください。

History.pushState()

History.pushState() メソッドは、履歴にレコードを追加するために使用されます。

window.history.pushState(状態、タイトル、URL)

このメソッドは、次の 3 つのパラメータを順番に受け入れます。

  • state: 追加されたレコードに関連付けられた状態オブジェクト。主に popstate イベントに使用されます。イベントがトリガーされると、オブジェクトはコールバック関数に渡されます。つまり、ブラウザはオブジェクトをシリアル化してローカルに保持し、ページがリロードされるとオブジェクトを取得できるようになります。このオブジェクトが必要ない場合は、ここに「null」を入力できます。
  • title: 新しいページのタイトル。ただし、現在すべてのブラウザはこのパラメータを無視するため、ここに空の文字列を入力できます。
  • url: 新しい URL は現在のページと同じドメイン内にある必要があります。ブラウザのアドレス バーにこの URL が表示されます。

現在の URL が example.com/1.html であると仮定すると、p​​ushState() メソッドを使用して、閲覧レコード (History オブジェクト) に新しいレコードを追加します。

var stateObj = { foo: 'bar' };
History.pushState(stateObj, 'ページ 2', '2.html');

新しいレコードを追加すると、ブラウザのアドレスバーにはすぐに example.com/2.html が表示されますが、 2.html にはジャンプせず、2.html が存在するかどうかも確認せず、ただ表示されます。閲覧履歴の最新のエントリを表示します。このとき、アドレスバーに新しいアドレスを入力して（例：「google.com」にアクセス）、「戻る」ボタンをクリックすると、ページの URL に「2.html」が表示されます。再度、URL には「1 .html」が表示されます。

つまり、pushState() メソッドはページの更新をトリガーせず、History オブジェクトを変更し、アドレス バーが反応するだけです。

このメソッドを使用した後、History.state プロパティを使用して状態オブジェクトを読み取ることができます。

var stateObj = { foo: 'bar' };
History.pushState(stateObj, 'ページ 2', '2.html');
History.state // {foo: "バー"}

pushState の URL パラメータが新しいアンカー値 (つまり hash) を設定する場合、hashchange イベントはトリガーされません。逆に、URL のアンカー値が変更されると、History オブジェクトに閲覧記録が作成されます。

pushState() メソッドがクロスドメイン URL を設定すると、エラーが報告されます。

// エラーを報告する
//現在の URL は http://example.com です
History.pushState(null, '', 'https://twitter.com/hello');

上記のコードでは、pushState がクロスドメイン URL を挿入しようとしているため、エラーが発生します。この設計の目的は、この方法ではページがジャンプしないため、悪意のあるコードがユーザーを騙して別の Web サイトにいると思わせることを防ぐことです。

History.replaceState()

History.replaceState() メソッドは、History オブジェクトの現在のレコードを変更するために使用されます。それ以外はすべて pushState() メソッドとまったく同じです。

現在の Web ページが「example.com/example.html」であると仮定します。

History.pushState({ページ: 1}, 'タイトル 1', '?page=1')
// URL は http://example.com/example.html?page=1 のように表示されます。

History.pushState({ページ: 2}, 'タイトル 2', '?page=2');
// URL は http://example.com/example.html?page=2 のように表示されます。

History.replaceState({ページ: 3}, 'タイトル 3', '?page=3');
// URL は http://example.com/example.html?page=3 のように表示されます。

履歴.back()
// URL は http://example.com/example.html?page=1 のように表示されます。

履歴.back()
// URL は http://example.com/example.html として表示されます

歴史.go(2)
// URL は http://example.com/example.html?page=3 のように表示されます。

ポップステート イベント

同じドキュメントの閲覧履歴 (つまり、history オブジェクト) が変更されるたびに、popstate イベントがトリガーされます。

pushState() メソッドまたは replaceState() メソッドを呼び出すだけではこのイベントはトリガーされないことに注意してください。ユーザーがブラウザーの「戻る」ボタンおよび「進む」ボタンをクリックするか、JavaScript を使用して History.back()、 を呼び出すだけです。履歴 .forward() メソッドと History.go() メソッドによってのみトリガーされます。また、このイベントは同じドキュメントのみを対象とします。閲覧履歴が切り替わり、異なるドキュメントが読み込まれた場合、このイベントはトリガーされません。

使用すると、「popstate」イベントのコールバック関数を指定できます。

window.onpopstate = 関数 (イベント) {
  console.log('場所: ' + document.location);
  console.log('state: ' + JSON.stringify(event.state));
};

// または
window.addEventListener('popstate', function(event) {
  console.log('場所: ' + document.location);
  console.log('state: ' + JSON.stringify(event.state));
});

コールバック関数のパラメータは event イベント オブジェクトで、その state プロパティは、現在の URL の pushState メソッドと replaceState メソッドによって提供される状態オブジェクト (つまり、これら 2 つのメソッドの最初のパラメータ) を指します。方法）。上記のコードの event.state は、pushState および replaceState メソッドを通じて現在の URL にバインドされた state オブジェクトです。

この「state」オブジェクトは、「history」オブジェクトを通じて直接読み取ることもできます。

var currentState = 履歴.状態;

ページが最初にロードされるとき、ブラウザは popstate イベントをトリガーしないことに注意してください。

作者: wangdoc

アドレス: https://wangdoc.com/

ライセンス: クリエイティブ・コモンズ 3.0

前の章次の章