直前に開いていたページに戻るためのリンクを実装する方法をご紹介いたします。
ブラウザの戻るボタンを使えば良い話ではありますが、フォームの確認画面などで使うケースが結構あったりするので、覚えておいて損はないかなと思います。
スポンサードリンク
直前に開いていたページに戻るリンクを実装する方法
前のページに戻るリンクは、aタグだけでなく、inputやbuttonでも実装可能です。HTMLタグは違っていても方法は同じです。
以下のようにonclick属性を追加して、値に「window.history.back();」を指定します。aタグのみ、hrefのリンクに反応しないように「return false;」を追加しています。
<a href="" onclick="window.history.back(); return false;">前のページに戻る</a>
<input type="button" onclick="window.history.back();" value="前のページに戻る">
<button type="button" onclick="window.history.back();">前のページに戻る</button>「window.history.back();」は「javascript:history.back();」にしてもOKです。
<a href="" onclick="javascript:history.back(); return false;">前のページに戻る</a>
<input type="button" onclick="javascript:history.back();" value="前のページに戻る">
<button type="button" onclick="javascript:history.back();">前のページに戻る</button>また、「history.go(-1);」という書き方もできます。「-1」の値を変更することで、履歴の何個前まで戻るか指定可能です。
<a href="" onclick="history.go(-1); return false;">前のページに戻る</a>
<input type="button" onclick="history.go(-1);" value="前のページに戻る">
<button type="button" onclick="history.go(-1);">前のページに戻る</button>履歴が存在する場合にのみリンクを表示したい
戻るページの履歴が存在している場合にのみ、リンクを表示させたいということもあるかと思います。そういう時は、「window.history.length」で履歴の数で判別して表示を切り替えることができます。
<div id="return"></div>
<script>
const return_link = document.getElementById('return');
if (window.history.length >= 2) {
return_link.innerHTML = '<a href="" onclick="window.history.back(); return false;">前のページに戻る</a>';
}
</script>あとがき
私の観測範囲では、フォームの確認画面くらいでしか使うことはありませんが、お問い合わせフォームを設置する時は結構な頻度で設置しています。
前のページに戻るリンクを設置したい時は、ぜひ参考にしていただければ幸いです。