JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのwindow.historyオブジェクトとは？役割と使い方を解説

window.historyオブジェクトとは

JavaScriptのwindow.historyオブジェクトは、ブラウザのセッション履歴（閲覧履歴）にアクセスし、前のページや次のページへ移動するために使用されます。このオブジェクトには、ユーザーが現在のセッションで訪れたURLの履歴が保存されており、履歴を操作するための便利なメソッドが用意されています。

主なメソッド

  • history.back() － 履歴上の1つ前のURLへ戻ります。ブラウザの「戻る」ボタンと同じ動作です。
  • history.forward() － 履歴上の1つ先のURLへ進みます。ブラウザの「進む」ボタンと同じ動作です。
  • history.go(n) － 指定した数だけ履歴を前後に移動します。例えば history.go(-2) は2つ前のページへ、history.go(0) は現在のページを再読み込みします。

サンプルコード

以下のコードを実行して、window.historyオブジェクトの基本的な使い方を確認してみましょう。

<!DOCTYPE html>
<html>
  <body>
    <script>
      function backPage() {
        window.history.back();
      }
      function nextPage() {
        window.history.forward();
      }
    </script>
    <input type="button" value="前のページへ戻る" onclick="backPage()">
    <input type="button" value="次のページへ進む" onclick="nextPage()">
  </body>
</html>

このサンプルでは、「前のページへ戻る」ボタンをクリックすると history.back() が呼び出されて前のURLへ移動し、「次のページへ進む」ボタンをクリックすると history.forward() によって次のURLへ進みます。

補足：履歴の長さを取得する

window.history.length プロパティを使うと、現在のセッションで訪れたページ数（履歴エントリの数）を取得できます。

console.log(window.history.length); // 例: 5

なお、セキュリティ上の理由により、履歴内の実際のURLを取得することはできません。window.historyオブジェクトで直接操作できるのは、履歴をたどったページ間の移動のみとなっています。

  1. JavaScriptのscreenXマウスイベントとは？役割と使い方を実例で解説

    マウスイベントが発生したとき、screenXプロパティは、画面（スクリーン）の左上を基準としたマウスポインタのX座標（水平方向の位置）をピクセル単位で返します。 screenXとscreenYの基本的な役割 イベントオブジェクトが持つscreenXは水平方向（X座標）、screenYは垂直方向（Y座標）を表します。この2つはブラウザウィンドウやWebページではなく、ユーザーの物理的な画面全体を基準にした座標を返す点が大きな特徴です。 似た用途の座標プロパティと比較すると、違いがより明確になります。 screenX / screenY：モニター画面全体を基準とした座標 clientX / cl

  2. JavaScriptのparseFloat()メソッドとは？役割と使い方をわかりやすく解説

    JavaScriptのparseFloat()メソッドは、文字列を解析（パース）して浮動小数点数を返すためのグローバル関数です。文字列の先頭から数値として読み取れる部分を変換し、数値として解釈できない文字に到達した時点で解析を終了します。 parseFloat()メソッドの主な特徴 文字列の先頭から数値の解析を開始する 先頭にある空白（ホワイトスペース）は無視される 数値として解釈できる部分のみが変換される 解析できない場合は NaN（Not a Number）を返す 使用例 以下のコードを実行して、JavaScriptにおけるparseFloat()メソッドの実際の動作を確認してみま