戻る・進む・更新ボタンを作る
ここでは、ブラウザの戻る・進む・更新といったボタンと同じ機能を持ったボタンを、 JavaScriptで作ってみたいと思います。 特に「戻る」ボタンなどは、 色々な所からリンクされているページに使うと威力を発揮します。
「更新」ボタンはリンクなどで出てきたlocationを使いますが、 「戻る」と「進む」はhistoryというものを使います。 英語で「履歴」という意味ですね。
戻る・進む・更新ボタンの作り方
戻るや進むボタンのソースは１行なので、 HTMLのボタン内に直接書きこむことができます。 が、ページの横幅の関係上、一応関数形式にして書いています。 外部ファイルに関数を記入しておけば、全てのページで使えるので便利かな？ まあそんなに変わらないでしょうけどね。
<script type="text/javascript"> <!-- //戻る 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には、複数のページを飛び越えて戻ったり進んだりする機能もあります。 何に使えるかは分かりませんが、知識として取り入れておくと良いでしょう。
<script type="text/javascript">
<!--
//履歴を指定数移動する
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のカッコ内に代入される仕組みです。