history.back()・history.forward()

JavaScriptのhistory.back()・history.forward()で前のページへ戻る・次のページへ進むボタン

戻る・進むのアイキャッチ

あまり使う機会がありませんが、history.back()history.forward() を使う事で、「戻る・進む」ボタンを簡単に作れます。

history.back()・history.forward()

history.back()history.forward() のhistoryオブジェクトは、ブラウザの「戻る・進む」ボタンが有効な時、その履歴を参照してページ遷移を行います。

ブラウザの「戻る・進む」は、全体の順番を履歴として持ちますが、historyオブジェクトは、それぞれのウィンドウの履歴のみを保存するので、多少異なることは覚えておきましょう。

前のページへ戻る・次のページへ進むボタンのサンプル

それでは、前のページへ戻る・次のページへ進むボタンのサンプルについて見てみましょう。

以下ボタンでをクリックすることで、ブラウザのセッションを参照して「前へ・次へ」と履歴に準じたページ遷移が行われます。

かかかず
かかかず

前へ・次へに該当するページがない場合、ページ遷移は行われません。

HTMLの onclick属性を使って、そこに history.back()history.forward() を実行させます。

前のページへ戻る・次のページへ進むボタンのサンプルボタンのコード

この記事でサンプルのコードです。

HTMLのonclick 属性を使い、クリックでhistory.back()history.forward()を実行します。

<button onClick="history.back()">前のページ</button>
<button onClick="history.forward()">次のページ</button>
かかかず
かかかず

onclick属性を使うと、めちゃめちゃ簡単なコードです。

イベント処理で実行する場合

HTML属性のonclick 属性を使わずに、.addEventListener のクリックでイベント処理を実行するには、以下のように記述します。

<button id="btnBack">前のページへ戻る</button>
<button id="btnForward">次のページへ進む</button>

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

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

記述量が多くなりますが、動作は上記ボタンサンプルと同じです。