【JavaScript】history.go()メソッドの使い方をわかりやすく解説!

この記事ではhistory.go()メソッドについて、

  • history.go()メソッドとは
  • history.go()メソッドの「使い方」と「サンプルコード」

などを分かりやすく説明するように心掛けています。ご参考になれば幸いです。

history.go()メソッドとは

window.histroyオブジェクトのgo()メソッドは引数に指定した数だけWebブラウザの履歴を戻したり、進めたりすることができるメソッドです。

history.go()メソッドの構文を以下に示します。

構文

history.go([number]);
  • 引数(省略可)
    • ブラウザの履歴を戻す(または進める)数を指定します。引数は省略可能です。
    • 負の数を指定した場合
      • 履歴が戻ります(ページが戻ります)。
    • 正の数を指定した場合
      • 履歴が進みます(ページが進みます)。
    • 引数を省略した場合
      • 現在のページを再読み込みします。
  • 戻り値
    • なし(undefined)

history.go()メソッドの「使い方」と「サンプルコード」

1つページを戻す場合には、以下のコードになります。

history.go(-1);

上記のコードを実行すると、ブラウザの「戻るボタン」と同じ動作をします。なお、history.go(-1)history.back()の呼び出しと同等です。

2つページを戻す場合には、以下のコードになります。

history.go(-2);

1つページを進める場合には、以下のコードになります。

history.go(1);

上記のコードを実行すると、ブラウザの「進むボタン」と同じ動作をします。なお、history.go(1)history.forward()の呼び出しと同等です。

あわせて読みたい

history.back()』と『history.forward()』については下記の記事で詳しく説明しています。興味のある方は下記のリンクからぜひチェックをしてみてください。

なお、以下のコードに示すように「引数に何も指定しない場合」または「引数に0を指定した場合」には、現在のWebページを再読み込みします。

history.go();
history.go(0);

上記のコードはlocation.reload()の呼び出しと同等です。

本記事のまとめ

この記事ではhistory.go()メソッドについて、以下の内容を説明しました。

  • history.go()メソッドとは
  • history.go()メソッドの「使い方」と「サンプルコード」

お読み頂きありがとうございました。