2007年5月14日(月) 13時13分54秒 [操作・移動]

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

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つ以上ある場合にのみ「戻る」リンクを表示するようにすると良いかもしれません。（ただし、「戻る」方向への履歴だとは限りません。「戻る」履歴はゼロで、「進む」履歴だけがある可能性もあります。）

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