あまり使う機会がありませんが、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>かかかず
記述量が多くなりますが、動作は上記ボタンサンプルと同じです。
