Presented by Nishishi via Movable Type. Last Updated: 2016/10/14. 13:32:50.

直前のページに戻るリンクを作る

JavaScriptを使うと、ブラウザの「戻る」ボタンや「進む」ボタンをクリックした場合と同じ効果を提供できます。これを活用することで、「前のページに戻る」リンクを作ることができます。

JavaScriptを使って、ブラウザの履歴を1つ戻す(=直前のページに戻る)には、以下のように記述します。

history.back();

または

history.go( -1 );

historyオブジェクトは、ブラウザの閲覧履歴です。backメソッドで「戻る」ボタンと同じ効果を出せます。goメソッドに引数「-1」(マイナス1)を与えても同じです。

これを使って、「直前のページに戻る」リンクを作るには、以下のようにHTML&JavaScriptを書けばよいでしょう。

<a href="#" onclick="history.back(); return false;">直前のページに戻る</a>

履歴を戻す処理(backメソッド)の直後に「return false;」と書いているのは、履歴が存在しなかった場合の対策です。これがないと、履歴が存在しなかった場合に、(現在表示している)ページの先頭にスクロールしてしまいます。それを防ぐための記述です。

上記のソースを表示させると、以下のように見えます。

新しいウインドウやタブでページが表示されている場合や、ブックマークからアクセスした場合は、「直前のページ」は存在しません。その場合は、ページ移動は起こりません。

履歴が存在しない場合はこのリンクは機能しないので、その場合でもリンクが表示されているのは都合が悪いかも知れません。アクセス者からすれば、「機能しないリンクがある」ということになるわけですから。

historyオブジェクトのlengthプロパティを参照すると、履歴の個数が分かります。先に、履歴の個数を調べておいてから、1つ以上ある場合にのみ「戻る」リンクを表示するようにすると良いかもしれません。(ただし、「戻る」方向への履歴だとは限りません。「戻る」履歴はゼロで、「進む」履歴だけがある可能性もあります。)

そこら辺の話は、またの機会に書きたいと思います。

JavaScript TIPS 主要なカテゴリ

現在、以下のカテゴリに区分してTIPSを公開しています。

  • イベント : JavaScriptを実行するトリガーとなるイベントに関するTIPS
  • 入力フォーム : JavaScriptで入力フォームを扱う方法に関するTIPS
  • 情報取得 : JavaScriptで様々な情報を得る方法に関するTIPS
  • 操作・移動 : JavaScriptでブラウザを操作したり表示ページを移動したりする方法に関するTIPS
  • 日付・時刻 : JavaScriptで日付や時刻を扱う方法に関するTIPS
  • 機能 : JavaScriptで何らかの機能を実現する方法に関するTIPS
  • 装飾・内容変更 : JavaScriptで装飾や内容を変更する方法に関するTIPS
  • 計算・変換 : JavaScriptで様々な計算や変換処理を行う方法に関するTIPS

▲各カテゴリ毎に、TIPSのタイトルと概要を一覧できます。ぜひ、いろいろ覗いてみて下さい!

関連書籍・関連ソフトなど