直前のページに戻るリンクをJavaScriptで作る方法

JavaScriptを使うと、ブラウザの「戻る」ボタンや「進む」ボタンをクリックした場合と同じ効果を提供できます。これを活用することで、「前のページに戻る」リンクを作ることができます。JavaScriptを使って、ブラウザの履歴を1つ戻す（＝直前のページに戻る）には、以下のように記述します。

history.back();

または

history.go( -1 );

historyオブジェクトはブラウザの閲覧履歴を保持しています。backメソッドで「戻る」ボタンと同じ効果を出せます。goメソッドに引数「-1」(マイナス1)を与えても同じです。「2つ前のページに戻す」のような需要は滅多にないとは思いますが、引数に「-2」を与えれば2つ前のページに戻れます。(^_^;)
ちなみに引数に「0」を与えると、現在のページを再読込します。

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

ボタン：<input type="button" onclick="window.history.back();" value="直前のページに戻る">
リンク：<a href="#" onclick="window.history.back(); return false;">直前のページに戻る</a>

※ボタンではなくリンクを作るソースで、最後に「return false;」と書いているのは、履歴が存在しなかった場合に(a要素の本来の動作である)リンク機能を無効にするためです。これがないと、履歴が存在しなかった場合にページの先頭にスクロールしてしまいますので。

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

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

なお、前に戻るのではなく、履歴の先に進む場合は history.forward(); を使うか、history.go( 1 ); を使います。この場合も、閲覧履歴に先がない場合はページ移動は起こりません。

閲覧履歴が存在する場合にだけ、戻るリンクを表示する？

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

昔々には、履歴にある「直前に閲覧していたページのURL」を得られる window.history.previous や、履歴の1つ先にあるURLが得られる window.history.next といったプロパティが存在していました。しかし、現在ではセキュリティのためか廃止されていて使えません。もしこれらのプロパティが使えたら、値を参照することで「戻れるかどうか」の判別ができたのですが。(FirefoxではVer.26で廃止されたようです。)

history.lengthで履歴の個数は分かる

で、直接どこのURLなのかは分からないものの、historyオブジェクトのlengthプロパティを参照すれば、現在のセッションで保持されている「履歴の個数」は分かります。
なので、履歴の個数を先に調べておいてから、1つ以上ある場合にのみ「戻る」リンクを表示するようにすれば「戻れる場合にだけ戻るリンクを表示する」ということも実現可能っぽく感じられます。

ただ、この履歴の個数は「戻る方向」への履歴だとは限りません。例えば「戻る方向」の履歴はゼロだけど「進む方向」の履歴は存在する……という可能性もあります。
したがって、lengthプロパティで履歴の個数をチェックしても「戻れるかどうか」の正確な判別はできません。

その辺に目をつぶるのであれば、以下のようなJavaScriptで「履歴がある場合にのみ戻るリンクを表示する」ということも可能です。

if( window.history.length >= 2 ) {
	// 履歴が2個以上あれば、戻るリンクを表示
	document.write('<a href="#" onclick="window.history.back(); return false;">直前のページに戻る</a>');
}
else {
	document.write('履歴がないよ');
}

history.lengthには「現在のページ」もカウントされるので、値は必ず1以上になります。
なので、上記のように「history.lengthの値が2以上かどうか」をチェックすれば、履歴が存在するかどうかをチェックできます。

先にも述べたとおり、「進む方向」の履歴かも知れないので、判別機能としては不完全ですが。
また、ブラウザの閲覧履歴には「ページ内リンク」をクリックした場合も追加されるので、「前のページ」が「同一ページ内の別の場所」である可能性もあります。

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

このページのURLをコピーして、新規のタブなりウインドウなりを開いてからアドレス欄にペーストすることで表示すれば、「履歴がないよ」と表示されるでしょう。(^_^;)

まあ、「進む」や「戻る」機能はブラウザに搭載されている機能を使えば良いので、あまりウェブ上にそういう機能を作る必要性はないかな、とも思いますけどもね。(^_^;;;

(更新日：2017年06月04日)