戻る・進む・更新ボタンを作る-JavaScript入門

HOME
JavaScript入門
戻る・進む・更新ボタンを作る

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

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

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

閲覧ページを戻ったり進んだり更新したりするスクリプトは以下のように記述します。

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

HTMLのBODY内に以下のように記述してみて下さい。

<script>

//戻る
function modoru(){
  history.back();
}

//進む
function susumu(){
  history.forward();
}

//更新
function koshin(){
  location.reload();
}

</script>

<input type="button"  value="戻る" onclick="modoru()">
<input type="button"  value="進む" onclick="susumu()">
<input type="button"  value="更新" onclick="koshin()">

サンプル：

当然ながら「進む」を押しても、進むページが無ければ移動しません。どこかのページに移動した後、このページに戻ってきてから試してみてください。

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

historyには、複数のページを飛び越えて進んだり戻ったりすることもできます。以下のように記述します。

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

例えば、このようにスクリプトを記述してみました。

<script>

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

</script>

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

サンプル：

このサンプルを実際に試すのは大変だと思います。JavaScriptでこうしたこともできるということを覚おくと、何かの時に活用できるかも知れません。

前へ次へ