History API

DOM の Window オブジェクトは、ブラウザーのセッション履歴 (WebExtensions history と混同しないように) へのアクセスを history オブジェクトを介して提供しています。このオブジェクトは、ユーザーの履歴の中を前のページや後のページへ移動したり、履歴スタックの中を称さしたりするのに便利なメソッドやプロパティが提供されています。

概念と使用方法

ユーザーの履歴の中を前のページや次のページへ移動するには、 back(), forward(), go() の各メソッドを使用します。

前のページや次のページへの移動

履歴を前に遡るには、次のようにします。

window.history.back()

これは、ちょうどユーザーがブラウザーのツールバーの前のページへ戻るボタンをクリックしたときのような動作です。

同様に、次のようにして (ユーザーが次のページへ進むボタンをクリックしたときのように) 次のページへ進むこともできます。

window.history.forward()

履歴内の特定の位置まで移動

go() メソッドを使うと、セッション履歴において現在のページから相対的な位置を指定して特定のページを読み込むことができます。 (現在のページの相対位置は 0 となります。)

ひとつ前のページへと戻る例です (back() と同様の動き)。

window.history.go(-1)

ページを進める例で、 forward() を呼び出すのと同様です。

window.history.go(1)

同様に、 2 を渡すことで2ページ分を進めることができます。

go() メソッドの他の使い方として、 0 を渡すか、引数なしで呼び出すことで、現在のページを再読み込みすることができます。

// 以下の文は、
// どちらもページを再読み込みする
// 効果があります。
window.history.go(0)
window.history.go()

length プロパティの値を参照することにより、履歴スタック中のページの数を知ることができます。

let numberOfEntries = window.history.length

インターフェイス

History
ブラウザーのセッション履歴 (すなわち、現在のページが読み込まれているタブやフレームで表示したことがあるページ群) の操作ができます。

以下の例では 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}"

仕様書

仕様書 状態 備考
HTML Living Standard
History の定義
現行の標準 HTML5 から変更なし
HTML5
History の定義
勧告 初回定義

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
HistoryChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 10Opera 完全対応 3Safari 完全対応 1WebView Android 完全対応 1Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 10.1Safari iOS 完全対応 1Samsung Internet Android 完全対応 1.0
backChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 ありIE 完全対応 10Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
forwardChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 ありIE 完全対応 10Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
goChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 ありIE 完全対応 10Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
lengthChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 ありIE 完全対応 10Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
pushStateChrome 完全対応 5Edge 完全対応 12Firefox 完全対応 4
補足
完全対応 4
補足
補足 Until Firefox 5, the passed object is serialized using JSON. Starting in Firefox 6, the object is serialized using the structured clone algorithm. This allows a wider variety of objects to be safely passed.
IE 完全対応 10Opera 完全対応 11.5Safari 完全対応 5WebView Android 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 完全対応 4
補足
完全対応 4
補足
補足 Until Firefox 5, the passed object is serialized using JSON. Starting in Firefox 6, the object is serialized using the structured clone algorithm. This allows a wider variety of objects to be safely passed.
Opera Android 完全対応 11.5Safari iOS 完全対応 4.3Samsung Internet Android 完全対応 1.0
replaceStateChrome 完全対応 5Edge 完全対応 12Firefox 完全対応 4
補足
完全対応 4
補足
補足 Until Firefox 5, the passed object is serialized using JSON. Starting in Firefox 6, the object is serialized using the structured clone algorithm. This allows a wider variety of objects to be safely passed.
IE 完全対応 10Opera 完全対応 11.5Safari 完全対応 5WebView Android 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 完全対応 4
補足
完全対応 4
補足
補足 Until Firefox 5, the passed object is serialized using JSON. Starting in Firefox 6, the object is serialized using the structured clone algorithm. This allows a wider variety of objects to be safely passed.
Opera Android 完全対応 11.5Safari iOS 完全対応 4.3Samsung Internet Android 完全対応 1.0
scrollRestorationChrome 完全対応 46Edge 完全対応 79Firefox 完全対応 46IE 未対応 なしOpera 完全対応 33Safari 完全対応 ありWebView Android 未対応 なしChrome Android 完全対応 46Firefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 5.0
stateChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 ありIE 完全対応 10Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
未対応  
未対応
実装ノートを参照してください。
実装ノートを参照してください。

関連情報

リファレンス

ガイド