ブラウザの履歴を操作する

This translation is incomplete. Please help translate this article from English

DOM Window オブジェクトは history オブジェクトを介したブラウザの履歴(not to be confused for WebExtensions history)へのアクセスを提供しています。このオブジェクトでは、前のページに戻ったり、( HTML5 からは履歴スタックの中身を操作できるなど)ユーザーの履歴を行き来するのに便利なメソッドとプロパティが提供されています。

履歴情報を用いて移動する

back(), forward(), go() メソッドを使用することにより、ユーザーの履歴を通して、前のページに戻ったり、次のページへと移動します。

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

履歴情報を通して前のページに戻るためには、このようにします:

window.history.back()

これにより、ちょうどユーザーがブラウザのツールバーの「前のページに戻る」ボタンをクリックしたときのような挙動がなされます。

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

window.history.forward()

履歴の指定した位置まで移動する

go() メソッドを使い、セッション履歴において現在のページと相対的な位置にある特定のページを読み込むことができます。(もちろん、現在のページのインデックスは 0 となります)

ひとつ前のページへと戻ります。( back() と同様の動き):

window.history.go(-1)

forward() を呼び出したのと同様に、次のページへと移動します:

window.history.go(1)

同じように、2 を渡せば、2ページ進むことも戻ることもできます。

Another use for go() is to refresh the current page by either passing 0 as an argument or by invoking it without an argument:

// The following statements
// both have the effect of
// refreshing the page
window.history.go(0);
window.history.go();

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

let numberOfEntries = window.history.length
註: Internet Explorer は go() のパラメータとして URL 文字列を渡すことができます。ですが、これは非標準の機能であり Gecko ではサポートされていません。

Interfaces

History
Allows manipulation of the browser session history, that is the pages visited in the tab or frame that the current page is loaded in.

Examples

The following example assigns a listener to the onpopstate property and then illustrates some of the methods of the history object to add, replace, and move within the browser history for the current tab.

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}"

Specifications

Specification Status Comment
HTML Living Standard
History の定義
現行の標準 No change from HTML5.
HTML5
History の定義
勧告 Initial definition.

ブラウザ互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
HistoryChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 ありIE 完全対応 10Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
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
補足
補足 In Firefox 2 through 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 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 4.3Samsung Internet Android 完全対応 あり
replaceStateChrome 完全対応 5Edge 完全対応 12Firefox 完全対応 4
補足
完全対応 4
補足
補足 In Firefox 2 through 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 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 4.3Samsung Internet Android 完全対応 あり
scrollRestorationChrome 完全対応 46Edge 未対応 なしFirefox 完全対応 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 完全対応 あり

凡例

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

関連項目