History.replaceState()

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

構文

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

パラメータ

stateObj
state オブジェクトは、replaceState メソッドに渡された履歴エントリに関連付けられた JavaScript オブジェクトです。state オブジェクトは null を指定することができます。
title
ブラウザーの多くは現在このパラメータを無視します、しかしながら将来は使うようになるかもしれません。ここに空の文字列を渡すことは、将来メソッドが変更されることになっても安全です。あるいは、状態を表す短いタイトルを渡すこともできます。
url 省略可
履歴エントリの 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() の定義
勧告 初期定義

ブラウザー実装状況

BCD tables only load in the browser