window.history の詳細

window.historyは、ブラウザの履歴を表すJavaScriptオブジェクトです。開発者がブラウザ履歴の操作やナビゲーションを可能にする、いくつかのメソッドとプロパティを提供しています。

window.history オブジェクトの属性には以下が含まれます

  1. length:ブラウザ履歴内のページの数
  2. 状態: pushState() または replaceState() 関数によって設定された、現在のページの状態オブジェクトを返します。

window.history オブジェクトのメソッドには次のようなものがあります。

  1. back():ブラウザの閲覧履歴から直前のページを読み込む。
  2. forward():履歴の次のページを読み込みます。
  3. go():履歴から特定のページを読み込み、現在のページからのオフセットを表す数値をパラメータとして渡すことができる。

それらのメソッドとプロパティに加えて、window.history オブジェクトには 2 つの重要なメソッドがあります。

  1. pushState()メソッドは、新しい状態をブラウザの履歴に追加し、現在のURLを変更しますが、新しいページは読み込まれません。このメソッドは3つのパラメータを受け取ります。状態(ステートオブジェクト)、タイトル(ほとんどの最新のブラウザでは無視されるようになりました)、URL(新しいURL)です。pushState()はブラウザの履歴のみを変更し、ページの再読み込みや読み込みは発生しないことに注意してください。
  2. replaceState():現在の状態オブジェクトを置き換えます。新しい履歴は追加されません。このメソッドは、state(ステートオブジェクト)、title(タイトル)、url(新しい URL)の 3 つの引数を受け取ります。

これらのメソッドおよびプロパティにより開発者はページをリフレッシュせずに、ブラウザの履歴を変更できるため、フロントエンドルーティングやSPA(シングルページアプリケーション)を実現できます。

セキュリティ上の理由により、ブラウザー履歴の変更は制限されています。ほとんどのブラウザーでは、同一生成元ポリシー下でのみ変更できます。つまり、新しいURLが、現在のページのドメイン名、プロトコル、ポート番号と完全に一致した場合のみ、pushState()とreplaceState()メソッドを使用できます。この制約に違反した場合、ブラウザーはSecurityError例外をスローします。

bannerAds