ブラウザの戻る・進む・更新ボタンをJavaScriptで提供する

HOME
更新日:2013.10.04
HOMEJavaScript入門 > 戻る・進む・更新ボタンを作る

戻る・進む・更新ボタンを作る

ここでは、ブラウザの戻る・進む・更新といったボタンと同じ機能を持ったボタンを、 JavaScriptで作ってみたいと思います。 特に「戻る」ボタンなどは、 色々な所からリンクされているページに使うと威力を発揮します。

「更新」ボタンはリンクなどで出てきたlocationを使いますが、 「戻る」と「進む」はhistoryというものを使います。 英語で「履歴」という意味ですね。

戻る・進む・更新ボタンの作り方

戻るや進むボタンのソースは1行なので、 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イベントで呼び出してやればOKです。

history.back()
一つ前のページに戻ります(ブラウザの戻るボタンと同じ)
history.forward()
一つ先にページに進みます(ブラウザの進むボタンと同じ)
location.relord()
ページを更新します(ブラウザの更新ボタンと同じ)

当然ながら、戻るページが無い(進むページが無い)という時には移動できません。 ということで、今回サンプルページは用意していません。 新しいページを開いた場合、戻るも進むも使えませんのでね。 このページ内のボタンでテストしてみて下さい。

複数ページ飛び越えて移動する

historyには、複数のページを飛び越えて戻ったり進んだりする機能もあります。 何に使えるかは分かりませんが、知識として取り入れておくと良いでしょう。

<script>

//履歴を指定数移動する
function rireki(num){
	history.go(num);
}

</script>

<form>
<input type="button"  value="2戻る" onclick="rireki(-2)">
<input type="button"  value="3進む" onclick="rireki(3)">
</form>

履歴を指定数だけ移動するには、history.go()を使います。 カッコ内には移動ページ数を入れます。負の数を入れると戻り、 正の数を入れると進みます。 上記の場合は引数numを指定し、関数呼び出し時にnumに移動数を代入しています。 それがhistory.goのカッコ内に代入される仕組みです。

history.go()
カッコ内に指定された数だけページを移動します。マイナスを指定すると戻ります。