JavaScriptで履歴を扱う「History」、URLを扱う「Location」などの基本JavaScript標準ライブラリの使い方超入門(10)(3/4 ページ)

» 2016年11月29日 05時00分 公開
[金城俊哉]

履歴を記録して行きつ戻りつ(Historyオブジェクト)

Onepoint

 Historyオブジェクトは、ブラウザーの履歴を管理しているオブジェクトです。プログラム側から履歴に沿って、前後に表示したページへ移動させたい場合は、Historyオブジェクトのメソッドを利用します。

履歴に沿って前後に表示したページに移動する

 Historyオブジェクトは、historyプロパティで取得することができます。「window.history」と書くか、たんに「history」と書くことができます。

 Historyオブジェクトでは、次のメソッドを使用して、履歴を戻ったり進んだりすることができます。

Historyオブジェクトのメソッド
メソッド 説明
back() ブラウザーの履歴を戻る。
forward() ブラウザーの履歴を進む。
go(number) numberで指定した数値のぶんだけ履歴を進む。マイナスの数を指定した場合は、そのぶんだけ戻る。

ページ上に履歴を「戻る/進む」ボタンを配置する

Navigator

「ではHistoryオブジェクトを使用してみましょう。ページ上に2個のボタンを配置して、ボタンクリックで履歴を戻ったり、進んだりできるようにしてみてください」


Driver

「ボタンクリックで呼ばれるイベントハンドラーで『history.back()』と『history.forward()』をそれぞれ実行すればいいですね」


ボタンクリックで履歴を戻ったり進んだりする(history.html)
実行結果

Memo 指定したぶんだけ履歴を戻ったり進んだりする

 Historyオブジェクトのgo()メソッドを使うと、指定した数のぶんだけ履歴を戻ったり、進んだりできます。引数に正の数を指定すれば履歴を進み、負の数を指定すれば戻ります。

履歴を2つ戻る
履歴を2つ進む

Copyright © ITmedia, Inc. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。