History.replaceState()

History.replaceState() メソッドは、現在の履歴を編集し、メソッドに渡された stateObjtitleURL パラメータによって置き換えます。このメソッドは、ユーザーのアクションに応じて現在の履歴エントリの state オブジェクトや URL を更新したい場合に特に便利です。

構文

history.replaceState(stateObj, title, [url])

パラメータ

stateObj
state オブジェクトは、replaceState メソッドに渡された履歴エントリに関連付けられた JavaScript オブジェクトです。state オブジェクトは null を指定することができます。
title
ブラウザーの多くは現在このパラメータを無視します、しかしながら将来は使うようになるかもしれません。ここに空の文字列を渡すことは、将来メソッドが変更されることになっても安全です。あるいは、状態を表す短いタイトルを渡すこともできます。
url Optional
履歴エントリの URL です。新しい URL は現在の URL と同じオリジンでなければなりません。もしそうでないと、replaceState から例外が投げられます。

使用例

https://www.mozilla.org/foo.html が以下の JavaScript を実行したとします:

const stateObj = { foo: 'bar' };
history.pushState(stateObj, '', 'bar.html');

上記の 2行の説明は、「History API を取り扱う」の記事の「pushState() の例」にあります。次に、https://www.mozilla.org/bar.html が以下の JavaScript を実行したとします:

history.replaceState(stateObj, '', 'bar2.html');

これにより、URL バーに https://www.mozilla.org/bar2.html が表示されるようになりますが、ブラウザーが bar2.html を読み込んだり、bar2.html が存在するかどうかを確認したりすることはありません。

ユーザーが https://www.microsoft.com に移動し、戻るボタンをクリックしたとします。この時点で、URL バーには https://www.mozilla.org/bar2.html が表示されます。ユーザーがもう一度「戻る」ボタンをクリックすると、URL バーには https://www.mozilla.org/foo.html が表示され、bar.html は完全にバイパスされます。

仕様

仕様書 策定状況 コメント
HTML Living Standard
History.replaceState() の定義
現行の標準 No change from HTML5.
HTML5
History.replaceState() の定義
勧告 初期定義

ブラウザー実装状況

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
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
Whether the title argument is usedChrome 未対応 なしEdge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera 未対応 なしSafari 完全対応 ありWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 未対応 なしOpera Android 未対応 なしSafari iOS ? Samsung Internet Android 未対応 なし

凡例

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