JavaScript 履歴オブジェクトの説明

ウェブページを閲覧するとき、前後に移動する操作にはあまり注意を払わないかもしれません。しかし、開発するときに、ページ間を移動すると何が起こるのか、ブラウザはページ情報をどのように保存するのか、前のページに戻るときにページを再読み込みする必要があるのかなど、考えたことがありますか？多くの疑問が浮かびます。これらの問題を解決するには、まずブラウザのwindowの下にあるhistoryオブジェクトを知る必要があります。この記事では、このオブジェクトの関連する知識ポイントを詳細にまとめます。

historyオブジェクトは、現在のウィンドウが最初に使用されてからのユーザーのナビゲーション履歴を表します。 history windowのプロパティであるため、各windowは独自のhistoryオブジェクトがあります。セキュリティ上の理由から、このオブジェクトはユーザーがアクセスした URL を明らかにしませんが、実際の URL を知らなくても前後に移動することができます。

1. ルートナビゲーション

history.go()メソッドは、ユーザーの履歴を前方または後方の任意の方向に移動します。このメソッドは 1 つのパラメータのみを受け入れます。このパラメータは、前方または後方に移動するステップ数を表す整数になります。

 history.go(-1);// 1ページ戻るhistory.go(1);// 1ページ進むhistory.go(2);// 2ページ進む//

go() には back() と forward() という 2 つの短縮メソッドがあります。

history.back(); // 1ページ戻る history.forward(); // 1ページ進む

historyオブジェクトにはlength属性もあります。history.length history.length == 1これがユーザーウィンドウの最初のページであることを意味します。

histroyの go メソッド、 backメソッド、forward forword 、およびブラウザ上のユーザーマニュアルの進むボタンと戻るボタンにより、ページが更新されてジャンプします。

2. 履歴状態管理API

（１）ハッシュチェンジイベント

hashchange：history hashchangeです。これは、ページ URL のハッシュが変更されたときにトリガーされ、開発者はこの時点で特定の操作を実行できます。 hashchangeイベントは、URL のフラグメント識別子 (# 記号を含む、# 記号に続く URL の部分) が変更されたときに発生します。状態管理 API を使用すると、開発者は新しいページをロードせずにブラウザの URL を変更できます。

たとえば、 pushState メソッドと replaceState メソッドでは、ページは更新されませんが、ルートは変更されます。

（２）ポップステートイベント

アクティブな履歴エントリが変更されると、 popstateイベントが発生します。アクティブ化される履歴エントリがhistory.pushState （）の呼び出しによって作成された場合、またはhistory.replaceState（）の呼び出しによって影響を受けた場合、 popstate イベントの state プロパティには、履歴エントリの状態オブジェクトのコピーが含まれます。 history.pushState()またはhistory.replaceState()を呼び出してもpopstateイベントはトリガーされないことに注意してください。このイベントは、ユーザーがブラウザの戻るボタンをクリックしたとき (または、 Javascriptコードでhistory.back()またはhistory.forward()を呼び出したとき) など、ブラウザのアクションが実行されたときにのみトリガーされます。

(3) history.pushState() メソッド

pushState()メソッドは、現在のブラウザセッションの履歴スタックに状態を追加します。このメソッドは、状態オブジェクト、新しい状態のタイトル、および (オプションの) 相対 URL の 3 つのパラメータを受け取ります。 pushState()メソッドが実行されると、状態情報が履歴レコードにプッシュされ、ブラウザのアドレスバーが新しい相対 URL を反映して変更されます。 URLバーには新しいアドレスが表示されますが、ページは読み込まれず、ページが存在するかどうかも確認されません。このメソッドはhistory.lengthを増加させます。

(4) history.replaceState() メソッド

replaceState()メソッドは、現在の履歴エントリを変更します。このメソッドは、 stateオブジェクト、新しい状態のタイトル、および (オプションの) 相対 URL の 3 つのパラメータを受け取ります。 r eplaceState()メソッドが実行されると、現在のstateオブジェクトまたは現在の履歴エンティティの URL がユーザーのアクションに応じて更新されます。URL バーには新しいアドレスが表示されますが、ページは読み込まれず、ページが存在するかどうかもチェックされません。このメソッドはhistory.lengthを増加させません。

<本文>
  <button onclick="handleNext()">クリックして次のページへ進みます</button><br>
  <button onclick="handleLast()">クリックして前のページへ移動</button><br>
  <スクリプト>
    window.onload = 関数（）{
      コンソールにログを記録します。
    }
    window.addEventListener('hashchange', 関数() {
      console.log('ハッシュが変更されました!')
    }、 間違い）;
    window.addEventListener('popstate', (イベント) => {
      console.log("場所: " + document.location + "、状態: " + JSON.stringify(event.state));
    });
    関数handleNext() {
      const 状態 = { ユーザー ID: "1234", ページ: "2" }
      const タイトル = '2'
      定数 url = 'page2.html'
      window.history.pushState(状態、タイトル、URL)
      コンソールにログを記録します。
    }
    関数handleLast() {
      const 状態 = { ユーザー ID: "1234", ページ: "21" }
      const title = '一'
      定数 url = 'page21.html'
      window.history.replaceState(状態、タイトル、URL)
      コンソールにログを記録します。
    }
  </スクリプト>
</本文>

結果は次のとおりです。