From 6148d1efc1f2dcd19c24f488ef50b63a17583f12 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 11 Mar 2022 00:46:22 +0900 Subject: History インターフェイスのメソッドの記事を移行準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/history/back/index.html | 71 ---------------- files/ja/web/api/history/back/index.md | 71 ++++++++++++++++ files/ja/web/api/history/forward/index.html | 71 ---------------- files/ja/web/api/history/forward/index.md | 71 ++++++++++++++++ files/ja/web/api/history/go/index.html | 89 -------------------- files/ja/web/api/history/go/index.md | 89 ++++++++++++++++++++ files/ja/web/api/history/pushstate/index.html | 101 ----------------------- files/ja/web/api/history/pushstate/index.md | 101 +++++++++++++++++++++++ files/ja/web/api/history/replacestate/index.html | 73 ---------------- files/ja/web/api/history/replacestate/index.md | 73 ++++++++++++++++ 10 files changed, 405 insertions(+), 405 deletions(-) delete mode 100644 files/ja/web/api/history/back/index.html create mode 100644 files/ja/web/api/history/back/index.md delete mode 100644 files/ja/web/api/history/forward/index.html create mode 100644 files/ja/web/api/history/forward/index.md delete mode 100644 files/ja/web/api/history/go/index.html create mode 100644 files/ja/web/api/history/go/index.md delete mode 100644 files/ja/web/api/history/pushstate/index.html create mode 100644 files/ja/web/api/history/pushstate/index.md delete mode 100644 files/ja/web/api/history/replacestate/index.html create mode 100644 files/ja/web/api/history/replacestate/index.md (limited to 'files/ja/web') diff --git a/files/ja/web/api/history/back/index.html b/files/ja/web/api/history/back/index.html deleted file mode 100644 index 122d0f7351..0000000000 --- a/files/ja/web/api/history/back/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: History.back() -slug: Web/API/History/back -tags: - - API - - HTML DOM - - History - - History API - - Method - - Reference - - Web -translation_of: Web/API/History/back ---- -
{{APIRef("History API")}}
- -

History.back() メソッドは、ブラウザーにセッション履歴内で1つ前のページに戻らせます。これは {{domxref("History.go", "history.go(-1)")}} を呼び出すのと同じ効果があります。1つ前のページがない場合、このメソッド呼び出しは何もしません。

- -

このメソッドは{{glossary("asynchronous", "非同期")}}です。移動が完了したときを検知したい場合は {{event("popstate")}} イベントのリスナーを追加してください。

- -

構文

- -
history.back()
- -

例

- -

以下の短い例では、ページ上のボタンを押すとセッション履歴内の1つ前の項目に移動します。

- -

HTML

- -
<button id="go-back">Go back!</button>
- -

JavaScript

- -
document.getElementById('go-back').addEventListener('click', () => {
-  history.back();
-});
- -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("HTML WHATWG", "history.html#history", "History.back()")}}{{Spec2("HTML WHATWG")}}{{SpecName("HTML5 W3C")}} から変更なし
{{SpecName("HTML5 W3C", "browsers.html#dom-history-back", "History.back()")}}{{Spec2("HTML5 W3C")}}初回定義
- -

ブラウザーの互換性

- -

{{Compat("api.History.back")}}

- -

関連情報

- - diff --git a/files/ja/web/api/history/back/index.md b/files/ja/web/api/history/back/index.md new file mode 100644 index 0000000000..122d0f7351 --- /dev/null +++ b/files/ja/web/api/history/back/index.md @@ -0,0 +1,71 @@ +--- +title: History.back() +slug: Web/API/History/back +tags: + - API + - HTML DOM + - History + - History API + - Method + - Reference + - Web +translation_of: Web/API/History/back +--- +
{{APIRef("History API")}}
+ +

History.back() メソッドは、ブラウザーにセッション履歴内で1つ前のページに戻らせます。これは {{domxref("History.go", "history.go(-1)")}} を呼び出すのと同じ効果があります。1つ前のページがない場合、このメソッド呼び出しは何もしません。

+ +

このメソッドは{{glossary("asynchronous", "非同期")}}です。移動が完了したときを検知したい場合は {{event("popstate")}} イベントのリスナーを追加してください。

+ +

構文

+ +
history.back()
+ +

例

+ +

以下の短い例では、ページ上のボタンを押すとセッション履歴内の1つ前の項目に移動します。

+ +

HTML

+ +
<button id="go-back">Go back!</button>
+ +

JavaScript

+ +
document.getElementById('go-back').addEventListener('click', () => {
+  history.back();
+});
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("HTML WHATWG", "history.html#history", "History.back()")}}{{Spec2("HTML WHATWG")}}{{SpecName("HTML5 W3C")}} から変更なし
{{SpecName("HTML5 W3C", "browsers.html#dom-history-back", "History.back()")}}{{Spec2("HTML5 W3C")}}初回定義
+ +

ブラウザーの互換性

+ +

{{Compat("api.History.back")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/history/forward/index.html b/files/ja/web/api/history/forward/index.html deleted file mode 100644 index 5e55df100b..0000000000 --- a/files/ja/web/api/history/forward/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: History.forward() -slug: Web/API/History/forward -tags: - - API - - HTML DOM - - History - - History API - - Method - - Reference - - Web -translation_of: Web/API/History/forward ---- -
{{APIRef("History API")}}
- -

History.forward() メソッドにより、ブラウザーはセッション履歴の一つ次のページに移動します。これは {{domxref("History.go", "history.go(1)")}} を呼び出すのと同じ効果があります。

- -

このメソッドは{{glossary("asynchronous", "非同期")}}です。移動が完了したことを検知したい場合は {{event("popstate")}} イベントのリスナーを追加してください。

- -

構文

- -
history.forward()
- -

例

- -

以下の例では、セッション履歴の一つ次のステップへ進めるボタンを作成します。

- -

HTML

- -
<button id='go-forward'>Go Forward!</button>
- -

JavaScript

- -
document.getElementById('go-forward').addEventListener('click', e => {
-  window.history.forward();
-})
- -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{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.forward")}}

- -

関連情報

- - diff --git a/files/ja/web/api/history/forward/index.md b/files/ja/web/api/history/forward/index.md new file mode 100644 index 0000000000..5e55df100b --- /dev/null +++ b/files/ja/web/api/history/forward/index.md @@ -0,0 +1,71 @@ +--- +title: History.forward() +slug: Web/API/History/forward +tags: + - API + - HTML DOM + - History + - History API + - Method + - Reference + - Web +translation_of: Web/API/History/forward +--- +
{{APIRef("History API")}}
+ +

History.forward() メソッドにより、ブラウザーはセッション履歴の一つ次のページに移動します。これは {{domxref("History.go", "history.go(1)")}} を呼び出すのと同じ効果があります。

+ +

このメソッドは{{glossary("asynchronous", "非同期")}}です。移動が完了したことを検知したい場合は {{event("popstate")}} イベントのリスナーを追加してください。

+ +

構文

+ +
history.forward()
+ +

例

+ +

以下の例では、セッション履歴の一つ次のステップへ進めるボタンを作成します。

+ +

HTML

+ +
<button id='go-forward'>Go Forward!</button>
+ +

JavaScript

+ +
document.getElementById('go-forward').addEventListener('click', e => {
+  window.history.forward();
+})
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{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.forward")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/history/go/index.html b/files/ja/web/api/history/go/index.html deleted file mode 100644 index 74195808c5..0000000000 --- a/files/ja/web/api/history/go/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: History.go() -slug: Web/API/History/go -tags: - - API - - HTML DOM - - History - - History API - - Method - - Reference -translation_of: Web/API/History/go ---- -
{{APIRef("History API")}}
- -

History.go() メソッドは、セッション履歴から特定のページを読み込みます。これを用いると、引数の値に応じて履歴の中を前方や後方に移動することができます。

- -

このメソッドは{{glossary("asynchronous", "非同期")}}です。移動が完了したときを検知したい場合は {{event("popstate")}} イベントのリスナーを追加してください。

- -

構文

- -
history.go([delta])
- -

引数

- -
-
delta {{optional_inline}}
-
履歴の中を移動したい先の位置で、現在のページからの相対位置です。負の数の場合は前方に移動し、正の値の場合は後方へ移動します。すなわち、例えば、 history.go(2) は2ページ後に移動し、 history.go(-2) は2ページ前に戻ります。値が渡されなかったときや、 delta が 0 と等しいときは、 location.reload() の呼び出しと同じ効果になります。
-
- -

例

- -

一つページを戻す場合 ({{domxref("History.back", "back()")}} の呼び出しと同等):

- -
history.go(-1)
- -

一つページを進める場合、 {{domxref("History.forward", "forward()")}} の呼び出しと同等:

- -
history.go(1)
- -

二つページを進める場合:

- -
history.go(2);
- -

二つページを戻す場合:

- -
history.go(-2);
- -

そして、以下の文はいずれも現在のページを再読み込みします。

- -
history.go();
-history.go(0);
- -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("HTML WHATWG", "history.html#dom-history-go", "History.go()")}}{{Spec2("HTML WHATWG")}}{{SpecName("HTML5 W3C")}} から変更なし
{{SpecName("HTML5 W3C", "browsers.html#dom-history-go", "History.go()")}}{{Spec2("HTML5 W3C")}}初回定義
- -

ブラウザーの互換性

- -

{{Compat("api.History.go")}}

- -

関連情報

- - diff --git a/files/ja/web/api/history/go/index.md b/files/ja/web/api/history/go/index.md new file mode 100644 index 0000000000..74195808c5 --- /dev/null +++ b/files/ja/web/api/history/go/index.md @@ -0,0 +1,89 @@ +--- +title: History.go() +slug: Web/API/History/go +tags: + - API + - HTML DOM + - History + - History API + - Method + - Reference +translation_of: Web/API/History/go +--- +
{{APIRef("History API")}}
+ +

History.go() メソッドは、セッション履歴から特定のページを読み込みます。これを用いると、引数の値に応じて履歴の中を前方や後方に移動することができます。

+ +

このメソッドは{{glossary("asynchronous", "非同期")}}です。移動が完了したときを検知したい場合は {{event("popstate")}} イベントのリスナーを追加してください。

+ +

構文

+ +
history.go([delta])
+ +

引数

+ +
+
delta {{optional_inline}}
+
履歴の中を移動したい先の位置で、現在のページからの相対位置です。負の数の場合は前方に移動し、正の値の場合は後方へ移動します。すなわち、例えば、 history.go(2) は2ページ後に移動し、 history.go(-2) は2ページ前に戻ります。値が渡されなかったときや、 delta が 0 と等しいときは、 location.reload() の呼び出しと同じ効果になります。
+
+ +

例

+ +

一つページを戻す場合 ({{domxref("History.back", "back()")}} の呼び出しと同等):

+ +
history.go(-1)
+ +

一つページを進める場合、 {{domxref("History.forward", "forward()")}} の呼び出しと同等:

+ +
history.go(1)
+ +

二つページを進める場合:

+ +
history.go(2);
+ +

二つページを戻す場合:

+ +
history.go(-2);
+ +

そして、以下の文はいずれも現在のページを再読み込みします。

+ +
history.go();
+history.go(0);
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("HTML WHATWG", "history.html#dom-history-go", "History.go()")}}{{Spec2("HTML WHATWG")}}{{SpecName("HTML5 W3C")}} から変更なし
{{SpecName("HTML5 W3C", "browsers.html#dom-history-go", "History.go()")}}{{Spec2("HTML5 W3C")}}初回定義
+ +

ブラウザーの互換性

+ +

{{Compat("api.History.go")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/history/pushstate/index.html b/files/ja/web/api/history/pushstate/index.html deleted file mode 100644 index c3ee86847e..0000000000 --- a/files/ja/web/api/history/pushstate/index.html +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: History.pushState() -slug: Web/API/History/pushState -tags: - - API - - HTML DOM - - History - - History API - - Location - - Method - - Reference - - Session - - URL - - Web - - pushState -translation_of: Web/API/History/pushState ---- -
{{APIRef("History API")}}
- -

HTML 文書では、history.pushState() メソッドはブラウザーのセッション履歴スタックに状態を追加します。

- -

構文

- -
history.pushState(state, title[, url])
- -

パラメーター

- -
-
state
-
state (状態)オブジェクトは、pushState() によって作られる新規履歴エントリに関連した JavaScript オブジェクトです。ユーザーが新規の state にナビゲートしたときはいつも、{{event("popstate")}} イベントが発火し、イベントの state プロパティは、履歴エントリの state オブジェクトのコピーを含みます。
-
state オブジェクトはシリアライズ可能なあらゆものとなりえます。Firefox では状態オブジェクトをユーザーのディスクに保存してブラウザーを再起動した後にも復帰できるため、state オブジェクトのシリアライズ表現を最大 640k 文字という上限を課しています。これを超える大きさの状態オブジェクトを pushState() に渡した場合、このメソッドは例外を投げます。これ以上のスペースが必要な場合、{{domxref("Window.sessionStorage", "sessionStorage")}} や {{domxref("Window.localStorage", "localStorage")}}の使用が推奨されます。
-
title
-
たいていのブラウザーはこのパラメーターを無視しますが、将来使うかもしれません。ここに空文字を渡すと、将来メソッドが変更されても安全でしょう。あるいは、これから移動する状態の短いタイトルを渡すこともできます。タイトルが変わりうる場合は、{{domxref("Document.title", "document.title")}} を使用できます。
-
url {{optional_inline}}
-
履歴エントリーの URL は、このパラメーターで与えられます。ブラウザーは pushState() を呼び出した後もこの URL を読み込もうとせずに、例えばユーザーがブラウザーを再起動した後など、後で URL を読み込む場合もあるのにご注意ください。新 URL は絶対パスとは限りません。つまり相対パスの場合、現在の URL から相対的に解決されます。新URL は現在の URL と同一 {{glossary("origin", "オリジン")}} でなければならず、そうでない場合、pushState() は例外をスローします。このパラメーターが指定されない場合、ドキュメントの現在の URL がセットされます。
-
- -

説明

- -

ある意味で、pushState() の呼び出しは window.location = "#foo"と似ていて、両方とも現在の文書に関連した別の履歴エントリを作成、アクティベートします。しかし pushState() にはいくつかの利点があります:

- - - -

pushState() は {{event("hashchange")}} イベントを発火せず、それは新URL がハッシュだけ旧URL と異なる場合でもそうなることに気をつけてください。

- -

例

- -

これはブラウザー履歴エントリに state, title, url をセットしたものを作成します。

- -

JavaScript

- -
const state = { 'page_id': 1, 'user_id': 5 }
-const title = ''
-const url = 'hello-world.html'
-
-history.pushState(state, title, url)
- -

クエリパラメーターの変更

- -
const url = new URL(window.location);
-url.searchParams.set('foo', 'bar');
-window.history.pushState({}, '', url);
- -

仕様

- - - - - - - - - - - - - - - - - - - -
仕様書策定状況コメント
{{SpecName('HTML WHATWG', "history.html#dom-history-pushstate", "History.pushState()")}}{{Spec2('HTML WHATWG')}}No change from {{SpecName("HTML5 W3C")}}.
{{SpecName('HTML5 W3C', "history.html#dom-history-pushstate", "History.pushState()")}}{{Spec2('HTML5 W3C')}}初期定義
- -

ブラウザー実装状況

- - - -

{{Compat("api.History.pushState")}}

- -

関連情報

- - diff --git a/files/ja/web/api/history/pushstate/index.md b/files/ja/web/api/history/pushstate/index.md new file mode 100644 index 0000000000..c3ee86847e --- /dev/null +++ b/files/ja/web/api/history/pushstate/index.md @@ -0,0 +1,101 @@ +--- +title: History.pushState() +slug: Web/API/History/pushState +tags: + - API + - HTML DOM + - History + - History API + - Location + - Method + - Reference + - Session + - URL + - Web + - pushState +translation_of: Web/API/History/pushState +--- +
{{APIRef("History API")}}
+ +

HTML 文書では、history.pushState() メソッドはブラウザーのセッション履歴スタックに状態を追加します。

+ +

構文

+ +
history.pushState(state, title[, url])
+ +

パラメーター

+ +
+
state
+
state (状態)オブジェクトは、pushState() によって作られる新規履歴エントリに関連した JavaScript オブジェクトです。ユーザーが新規の state にナビゲートしたときはいつも、{{event("popstate")}} イベントが発火し、イベントの state プロパティは、履歴エントリの state オブジェクトのコピーを含みます。
+
state オブジェクトはシリアライズ可能なあらゆものとなりえます。Firefox では状態オブジェクトをユーザーのディスクに保存してブラウザーを再起動した後にも復帰できるため、state オブジェクトのシリアライズ表現を最大 640k 文字という上限を課しています。これを超える大きさの状態オブジェクトを pushState() に渡した場合、このメソッドは例外を投げます。これ以上のスペースが必要な場合、{{domxref("Window.sessionStorage", "sessionStorage")}} や {{domxref("Window.localStorage", "localStorage")}}の使用が推奨されます。
+
title
+
たいていのブラウザーはこのパラメーターを無視しますが、将来使うかもしれません。ここに空文字を渡すと、将来メソッドが変更されても安全でしょう。あるいは、これから移動する状態の短いタイトルを渡すこともできます。タイトルが変わりうる場合は、{{domxref("Document.title", "document.title")}} を使用できます。
+
url {{optional_inline}}
+
履歴エントリーの URL は、このパラメーターで与えられます。ブラウザーは pushState() を呼び出した後もこの URL を読み込もうとせずに、例えばユーザーがブラウザーを再起動した後など、後で URL を読み込む場合もあるのにご注意ください。新 URL は絶対パスとは限りません。つまり相対パスの場合、現在の URL から相対的に解決されます。新URL は現在の URL と同一 {{glossary("origin", "オリジン")}} でなければならず、そうでない場合、pushState() は例外をスローします。このパラメーターが指定されない場合、ドキュメントの現在の URL がセットされます。
+
+ +

説明

+ +

ある意味で、pushState() の呼び出しは window.location = "#foo"と似ていて、両方とも現在の文書に関連した別の履歴エントリを作成、アクティベートします。しかし pushState() にはいくつかの利点があります:

+ + + +

pushState() は {{event("hashchange")}} イベントを発火せず、それは新URL がハッシュだけ旧URL と異なる場合でもそうなることに気をつけてください。

+ +

例

+ +

これはブラウザー履歴エントリに state, title, url をセットしたものを作成します。

+ +

JavaScript

+ +
const state = { 'page_id': 1, 'user_id': 5 }
+const title = ''
+const url = 'hello-world.html'
+
+history.pushState(state, title, url)
+ +

クエリパラメーターの変更

+ +
const url = new URL(window.location);
+url.searchParams.set('foo', 'bar');
+window.history.pushState({}, '', url);
+ +

仕様

+ + + + + + + + + + + + + + + + + + + +
仕様書策定状況コメント
{{SpecName('HTML WHATWG', "history.html#dom-history-pushstate", "History.pushState()")}}{{Spec2('HTML WHATWG')}}No change from {{SpecName("HTML5 W3C")}}.
{{SpecName('HTML5 W3C', "history.html#dom-history-pushstate", "History.pushState()")}}{{Spec2('HTML5 W3C')}}初期定義
+ +

ブラウザー実装状況

+ + + +

{{Compat("api.History.pushState")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/history/replacestate/index.html b/files/ja/web/api/history/replacestate/index.html deleted file mode 100644 index c06e22398e..0000000000 --- a/files/ja/web/api/history/replacestate/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: History.replaceState() -slug: Web/API/History/replaceState -tags: - - API - - HTML DOM - - History - - History API - - Method - - Reference -translation_of: Web/API/History/replaceState ---- -
{{APIRef("History API")}}
- -

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

- -

構文

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

パラメータ

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

- -

仕様

- - - - - - - - - - - - - - - - - - - -
仕様書策定状況コメント
{{SpecName("HTML WHATWG", "history.html#dom-history-replacestate", "History.replaceState()")}}{{Spec2("HTML WHATWG")}}No change from {{SpecName("HTML5 W3C")}}.
{{SpecName("HTML5 W3C", "history.html#dom-history-replacestate", "History.replaceState()")}}{{Spec2("HTML5 W3C")}}初期定義
- -

ブラウザー実装状況

- - - -

{{Compat("api.History.replaceState")}}

diff --git a/files/ja/web/api/history/replacestate/index.md b/files/ja/web/api/history/replacestate/index.md new file mode 100644 index 0000000000..c06e22398e --- /dev/null +++ b/files/ja/web/api/history/replacestate/index.md @@ -0,0 +1,73 @@ +--- +title: History.replaceState() +slug: Web/API/History/replaceState +tags: + - API + - HTML DOM + - History + - History API + - Method + - Reference +translation_of: Web/API/History/replaceState +--- +
{{APIRef("History API")}}
+ +

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

+ +

構文

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

パラメータ

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

+ +

仕様

+ + + + + + + + + + + + + + + + + + + +
仕様書策定状況コメント
{{SpecName("HTML WHATWG", "history.html#dom-history-replacestate", "History.replaceState()")}}{{Spec2("HTML WHATWG")}}No change from {{SpecName("HTML5 W3C")}}.
{{SpecName("HTML5 W3C", "history.html#dom-history-replacestate", "History.replaceState()")}}{{Spec2("HTML5 W3C")}}初期定義
+ +

ブラウザー実装状況

+ + + +

{{Compat("api.History.replaceState")}}

-- cgit v1.2.3-54-g00ecf