From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/api/history/pushstate/index.html | 101 ++++++++++++++++++++++++++ 1 file changed, 101 insertions(+) create mode 100644 files/ja/web/api/history/pushstate/index.html (limited to 'files/ja/web/api/history/pushstate') diff --git a/files/ja/web/api/history/pushstate/index.html b/files/ja/web/api/history/pushstate/index.html new file mode 100644 index 0000000000..ffd1336866 --- /dev/null +++ b/files/ja/web/api/history/pushstate/index.html @@ -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")}}

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf