--- title: History API slug: Web/API/History_API tags: - API - Advanced - DOM - HTML5 - History - 履歴 translation_of: Web/API/History_API ---
DOM の {{DOMxRef("Window")}} オブジェクトは、ブラウザーのセッション履歴 (WebExtensions history と混同しないように) へのアクセスを {{DOMxRef("Window.history","history")}} オブジェクトを介して提供しています。このオブジェクトは、ユーザーの履歴の中を前のページや後のページへ移動したり、履歴スタックの中を操作したりするのに便利なメソッドやプロパティが提供されています。
ユーザーの履歴の中を前のページや次のページへ移動するには、 {{DOMxRef("History.back","back()")}}, {{DOMxRef("History.forward","forward()")}}, {{DOMxRef("History.go","go()")}} の各メソッドを使用します。
履歴を前に遡るには、次のようにします。
window.history.back()
これは、ちょうどユーザーがブラウザーのツールバーの前のページへ戻るボタンをクリックしたときのような動作です。
同様に、次のようにして (ユーザーが次のページへ進むボタンをクリックしたときのように) 次のページへ進むこともできます。
window.history.forward()
{{DOMxRef("History.go","go()")}} メソッドを使うと、セッション履歴において現在のページから相対的な位置を指定して特定のページを読み込むことができます。 (現在のページの相対位置は 0
となります。)
ひとつ前のページへと戻る例です ({{DOMxRef("History.back","back()")}} と同様の動き)。
window.history.go(-1)
ページを進める例で、 {{DOMxRef("History.forward","forward()")}} を呼び出すのと同様です。
window.history.go(1)
同様に、 2
を渡すことで2ページ分を進めることができます。
go()
メソッドの他の使い方として、 0
を渡すか、引数なしで呼び出すことで、現在のページを再読み込みすることができます。
// 以下の文は、 // どちらもページを再読み込みする // 効果があります。 window.history.go(0) window.history.go()
length
プロパティの値を参照することにより、履歴スタック中のページの数を知ることができます。
let numberOfEntries = window.history.length
以下の例では onpopstate
プロパティにリスナーを割り当てています。そして、 history オブジェクトのメソッドで現在のタブのブラウザー履歴の追加、置換、移動など、いくつかの操作を説明しています。
window.onpopstate = function(event) { alert(`location: ${document.location}, state: ${JSON.stringify(event.state)}`) } history.pushState({page: 1}, "title 1", "?page=1") history.pushState({page: 2}, "title 2", "?page=2") history.replaceState({page: 3}, "title 3", "?page=3") history.back() // alerts "location: http://example.com/example.html?page=1, state: {"page":1}" history.back() // alerts "location: http://example.com/example.html, state: null" history.go(2) // alerts "location: http://example.com/example.html?page=3, state: {"page":3}"
仕様書 | 状態 | 備考 |
---|---|---|
{{SpecName("HTML WHATWG", "browsers.html#history", "History")}} | {{Spec2("HTML WHATWG")}} | {{SpecName("HTML5 W3C")}} から変更なし |
{{SpecName("HTML5 W3C", "browsers.html#history", "History")}} | {{Spec2("HTML5 W3C")}} | 初回定義 |
{{Compat("api.History")}}