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/back/index.html | 73 ++++++++++++++++ files/ja/web/api/history/go/index.html | 91 ++++++++++++++++++++ files/ja/web/api/history/index.html | 84 +++++++++++++++++++ files/ja/web/api/history/pushstate/index.html | 101 +++++++++++++++++++++++ files/ja/web/api/history/replacestate/index.html | 73 ++++++++++++++++ 5 files changed, 422 insertions(+) create mode 100644 files/ja/web/api/history/back/index.html create mode 100644 files/ja/web/api/history/go/index.html create mode 100644 files/ja/web/api/history/index.html create mode 100644 files/ja/web/api/history/pushstate/index.html create mode 100644 files/ja/web/api/history/replacestate/index.html (limited to 'files/ja/web/api/history') diff --git a/files/ja/web/api/history/back/index.html b/files/ja/web/api/history/back/index.html new file mode 100644 index 0000000000..568ed6dc1f --- /dev/null +++ b/files/ja/web/api/history/back/index.html @@ -0,0 +1,73 @@ +--- +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/go/index.html b/files/ja/web/api/history/go/index.html new file mode 100644 index 0000000000..c449782e70 --- /dev/null +++ b/files/ja/web/api/history/go/index.html @@ -0,0 +1,91 @@ +--- +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/index.html b/files/ja/web/api/history/index.html new file mode 100644 index 0000000000..5b049db57a --- /dev/null +++ b/files/ja/web/api/history/index.html @@ -0,0 +1,84 @@ +--- +title: History +slug: Web/API/History +tags: + - API + - HTML DOM + - History API + - Interface + - Web +translation_of: Web/API/History +--- +
{{ APIRef("History API") }}
+ +

History インターフェイスで、ブラウザーのセッション履歴、つまり現在のページが読み込まれたタブまたはフレームで訪問したページを操作することができます。

+ +

プロパティ

+ +

History インターフェイスは何もプロパティを継承していません。

+ +
+
{{domxref("History.length","length")}} {{readOnlyInline}}
+
現在読み込まれているページを含むセッション履歴の要素数を表す Integer を返します。たとえば、新しいタブで読み込まれたページのこのプロパティは 1 を返します。
+
{{domxref("History.scrollRestoration","scrollRestoration")}}
+
ウェブアプリケーションが履歴の操作で既定のスクロール位置の復元を明示的に設定できるようにします。このプロパティは auto または manual を指定することができます。
+
{{domxref("History.state","state")}} {{readOnlyInline}}
+
履歴スタックの最上位にある状態を表す any の値を返します。これは {{event("popstate")}} イベントを待たずに状態を確認する方法です。
+
+ +

メソッド

+ +

History インターフェイスは何もメソッドを継承していません。

+ +
+
{{domxref("History.back","back()")}}
+
これは非同期メソッドであり、ユーザーがブラウザーの戻るボタンをクリックしたときと同じく、セッション履歴の一つ前のページへ移動します。 history.go(-1) と同等です。 +
このメソッドを呼び出して、セッション履歴の最初のページを超えて戻っても何の効果もなく、例外が発生することもありません。
+
+
{{domxref("History.forward","forward()")}}
+
これは非同期メソッドであり、ユーザーがブラウザーの次へボタンをクリックしたときと同じく、セッション履歴の一つ次のページへ移動します。これは history.go(1) と同等です。 +
このメソッドを呼び出して、セッション履歴の直近のページを超えて進んでも何の効果もなく、例外が発生することもありません。
+
+
{{domxref("History.go","go()")}}
+
セッション履歴上で、現在のページからの相対位置で識別されるページを非同期に読み出します。たとえば、 -1 は前のページで 1 は次のページです。範囲外の値を指定した場合 (例えば、セッション履歴に以前訪問したページがないときに -1 を指定した場合)、このメソッドは暗黙に何もしません。 go() を引数なし、または 0 の値で呼び出すと、現在のページを再読み込みします。 Internet Explorer では数値の代わりに文字列を指定することで、履歴リストの中の指定した URL へ移動することができます。
+
{{domxref("History.pushState","pushState()")}}
+
指定されたデータを指定されたタイトル (および、指定されていれば URL) でセッション履歴に追加します。このデータは DOM においては透過的でないものとして扱われます。シリアライズ可能な JavaScript を指定することができます。詳しくは、 History API での作業を参照してください。
+
{{domxref("History.replaceState","replaceState()")}}
+
履歴スタックの最新の項目が、指定したデータ、タイトル、指定されていれば URL になるよう更新します。データは DOM では透過的でないものとして扱われます。シリアライズ可能な JavaScript を指定することができます。なお、 Safari 以外のすべてのブラウザーが今のところ title 引数を無視することに注意してください。詳しくは、 History API での作業を参照してください。
+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG', "browsers.html#the-history-interface", "History")}}{{Spec2('HTML WHATWG')}}scrollRestoration 属性の追加。
{{SpecName('HTML5 W3C', "browsers.html#the-history-interface", "History")}}{{Spec2('HTML5 W3C')}}初回定義
+ +

ブラウザーの互換性

+ + + +

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

+ +

関連情報

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

+ +

関連情報

+ + diff --git a/files/ja/web/api/history/replacestate/index.html b/files/ja/web/api/history/replacestate/index.html new file mode 100644 index 0000000000..0cbcbcb37e --- /dev/null +++ b/files/ja/web/api/history/replacestate/index.html @@ -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