《 1:00 PM 公開/更新》
ブラウザの「戻る」ボタンと同様の効果をJavaScriptで作るには、historyオブジェクトのbackメソッドを使って、history.back();と記述するだけです。これで「直前のページに戻る」リンクが簡単に作れます。履歴が存在しない場合にはリンクそのものを生成しないようにするには、history.lengthプロパティを参照して判別する方法も(不完全ですが)なくはありません。
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要素の本来の動作である)リンク機能を無効にするためです。これがないと、履歴が存在しなかった場合にページの先頭にスクロールしてしまいますので。
上記のソースを表示させると、以下のように見えます。
ボタン： なので、履歴の個数を先に調べておいてから、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をコピーして、新規のタブなりウインドウなりを開いてからアドレス欄にペーストすることで表示すれば、「履歴がないよ」と表示されるでしょう。(^_^;)
まあ、「進む」や「戻る」機能はブラウザに搭載されている機能を使えば良いので、あまりウェブ上にそういう機能を作る必要性はないかな、とも思いますけどもね。(^_^;;;
()
▼このページに関連しそうな記事が約8本くらい自動表示されています。(たぶん)
