にしし ふぁくとりー(西村文宏 個人サイト)

"JavaScript Tips Factory" : Presented by Nishishi. Since 1997.

直前のページに戻るリンクを作る方法 [操作・移動]

ブラウザの「戻る」ボタンと同様の効果をJavaScriptで作るには、historyオブジェクトのbackメソッドを使って、history.back();と記述するだけです。これで「直前のページに戻る」リンクが簡単に作れます。履歴が存在しない場合にはリンクそのものを生成しないようにするには、history.lengthプロパティを参照して判別する方法も(不完全ですが)なくはありません。

直前のページに戻るリンクを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で「履歴がある場合にのみ戻るリンクを表示する」ということも可能です。

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

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

()

JavaScript TIPSふぁくとりーの主要なカテゴリ

下記のカテゴリに区分して、JavaScriptに関するTIPSを公開しています。カッコ内の数字は、該当する記事の件数です。

著者紹介


にしし(西村文宏)

にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊+小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi にしし/西村文宏 on Google+ フォローはお気軽に!

にしし(西村文宏)連絡先
☕ コーヒーをおごる

著書一覧と詳細

関連するかもしれない情報など

▼このページに関連しそうな記事が約8本くらい自動表示されています。(たぶん)

--- 当サイト内を検索 ---