ここでは、ブラウザの戻る・進む・更新といったボタンと同じ機能を持ったボタンを、 JavaScriptで作ってみたいと思います。 特に「戻る」ボタンなどは、 色々な所からリンクされているページに使うと威力を発揮します。
「更新」ボタンはリンクなどで出てきたlocationを使いますが、 「戻る」と「進む」はhistoryというものを使います。 英語で「履歴」という意味ですね。
戻るや進むボタンのソースは１行なので、 HTMLのボタン内に直接書きこむことができます。 が、ページの横幅の関係上、一応関数形式にして書いています。 外部ファイルに関数を記入しておけば、 全てのページで使えるので便利かもしれません。 まあそんなに変わらないでしょうけど。
<script>
function modoru(){
history.back();
}
function susumu(){
history.forward();
}
function koshin(){
location.reload();
}
</script>
<form>
<input type="button" value="戻る" onclick="modoru()">
<input type="button" value="進む" onclick="susumu()">
<input type="button" value="更新" onclick="koshin()">
</form>
上記のように、history.back()が「戻る」， history.forward()が「進む」， location.relord()が「更新」を意味します。 それぞれ関数にしています。 それをフォームのボタン内にあるonclickイベントで呼び出してやればＯＫです。
- history.back()
- 一つ前のページに戻ります（ブラウザの戻るボタンと同じ）
- history.forward()
- 一つ先にページに進みます（ブラウザの進むボタンと同じ）
- location.relord()
- ページを更新します（ブラウザの更新ボタンと同じ）
当然ながら、戻るページが無い（進むページが無い）という時には移動できません。 ということで、今回サンプルページは用意していません。 新しいページを開いた場合、戻るも進むも使えませんのでね。 このページ内のボタンでテストしてみて下さい。
historyには、複数のページを飛び越えて戻ったり進んだりする機能もあります。 何に使えるかは分かりませんが、知識として取り入れておくと良いでしょう。
<script>
function rireki(num){
history.go(num);
}
</script>
<form>
<input type="button" value="２戻る" onclick="rireki(-2)">
<input type="button" value="３進む" onclick="rireki(3)">
</form>
履歴を指定数だけ移動するには、history.go()を使います。 カッコ内には移動ページ数を入れます。負の数を入れると戻り、 正の数を入れると進みます。 上記の場合は引数numを指定し、関数呼び出し時にnumに移動数を代入しています。 それがhistory.goのカッコ内に代入される仕組みです。
- history.go()
- カッコ内に指定された数だけページを移動します。マイナスを指定すると戻ります。