ブラウザの履歴を前後に移動する(history.back,history.forward.history.go)

広告

windows.history オブジェクトの back メソッド、 forward メソッド、 go メソッドを実行すると、ブラウザの履歴を進んだり戻ったりすることができます。ここでは JavaScript を使ってブラウザの履歴を前後に移動する方法について解説します。

history.backメソッドとhistory.forwardメソッドの使い方

window.history オブジェクトで用意されている back メソッドを実行すると、ブラウザの履歴をひとつ前に戻ります。書式は次のとおりです。

history.back()

window.history オブジェクトで用意されている forward メソッドを実行すると、ブラウザの履歴をひとつ先に進みます。書式は次のとおりです。

history.forward()

back メソッドはブラウザで「戻る」ボタンをクリックした場合と同じです。 forward メソッドはブラウザで「進む」ボタンをクリックした場合と同じです。移動する方向の履歴が無かった場合には何も行われません。

サンプルコード

次のサンプルを見てください。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプル</title>
</head>
<body>

<h1>サンプル</h1>

<p>履歴を前後に移動します。</p>

<input type="button" value="back" id="btnBack">
<input type="button" value="forward" id="btnForward">

<script>
let btnBack = document.getElementById('btnBack');
btnBack.addEventListener('click', function(){
    history.back();
});

let btnForward = document.getElementById('btnForward');
btnForward.addEventListener('click', function(){
    history.forward();
});
</script>

</body>
</html>

ブラウザで次のように最初に Bing のサイト、次にサンプルページ、次に Google のサイトを見たあとブラウザの「戻る」ボタンでサンプルページを表示している状態です。

history.backメソッドとhistory.forwardメソッドの使い方(1)

画面に表示されている forward ボタンをクリックすると、履歴のひとつ先にあるページを表示します。

history.backメソッドとhistory.forwardメソッドの使い方(2)

ブラウザの「戻る」ボタンで再びサンプルページに戻ったあと、画面に表示されている back ボタンをクリックすると、履歴のひとつ前にあるあるページを表示します。

history.backメソッドとhistory.forwardメソッドの使い方(3)

history.goメソッドの使い方

window.history オブジェクトで用意されている go メソッドを実行すると、ブラウザの履歴を引数に指定した数だけ進めたり戻したりすることができます。書式は次のとおりです。

history.go([num])

省略可能な 1 番目の引数に履歴を進める(または戻す)数を指定します。正の数値を指定した場合は履歴が進み、負の数値を指定した場合は履歴が戻ります。

history.forward() は history.go(1) と同じで、 history.back() は history.go(-1) と同じです。また history.go(0) や引数を省略した history.go() は現在のページの再読み込みが行われます。

サンプルコード

次のサンプルを見てください。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプル</title>
</head>
<body>

<h1>サンプル</h1>

<p>履歴を前後に移動します。</p>

<input type="button" value="前へ" id="btnGoback1">
<input type="button" value="前の前へ" id="btnGoback2">

<script>
let btnGo1 = document.getElementById('btnGoback1');
btnGoback1.addEventListener('click', function(){
    history.go(-1);
});

let btnGo2 = document.getElementById('btnGoback2');
btnGoback2.addEventListener('click', function(){
    history.go(-2);
});
</script>

</body>
</html>

ブラウザで次のように最初に Bing のサイト、次に Google のサイト、そして最後にサンプルページを表示している状態です。

history.goメソッドの使い方(1)

画面に表示されている「前へ」ボタンをクリックすると、履歴のひとつ前にあるページを表示します。

history.goメソッドの使い方(2)

ブラウザの「戻る」ボタンで再びサンプルページに戻ったあと、画面に表示されている「前へ前へ」ボタンをクリックすると、履歴のふたつ前にあるあるページを表示します。

history.goメソッドの使い方(3)

-- --

JavaScript を使ってブラウザの履歴を前後に移動する方法について解説しました。

( Written by Tatsuo Ikura )

関連記事 (一部広告含む)
Profile
profile_img

著者 / TATSUO IKURA

初心者~中級者の方を対象としたプログラミング方法や開発環境の構築の解説を行うサイトの運営を行っています。