直前に開いていたページに戻るリンクを実装する方法

直前に開いていたページに戻るリンクを実装する方法

直前に開いていたページに戻るリンクを実装する方法

直前に開いていたページに戻るためのリンクを実装する方法をご紹介いたします。

ブラウザの戻るボタンを使えば良い話ではありますが、フォームの確認画面などで使うケースが結構あったりするので、覚えておいて損はないかなと思います。

スポンサードリンク

直前に開いていたページに戻るリンクを実装する方法

前のページに戻るリンクは、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>

あとがき

私の観測範囲では、フォームの確認画面くらいでしか使うことはありませんが、お問い合わせフォームを設置する時は結構な頻度で設置しています。

前のページに戻るリンクを設置したい時は、ぜひ参考にしていただければ幸いです。

この記事が気に入ったら
いいね!してね♪

Twitter で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。