h5のhistory.pushState()の使用例を詳しく紹介

HTML ファイルでは、history.pushState() メソッドがブラウザ履歴に state を追加します。

pushState() は 3 つのパラメータを取ります: 状態オブジェクト、タイトル (現在は無視されています)、およびオプションの URL 。これら 3 つのパラメーターについては、以下で詳しく説明します。

state オブジェクト - state オブジェクトは、pushState() メソッドによって作成され、履歴レコードに関連する JS オブジェクトです。ユーザーが新しい状態に誘導されると、popstate イベントがトリガーされます。イベントの状態プロパティには、履歴の状態オブジェクトが含まれます。 (翻訳者注: つまり、JSON 文字列を保存し、popstate イベントで使用できます。) 状態オブジェクトは、シリアル化できるものであれば何でも構いません。 Firefox はこれらのオブジェクトをユーザーのディスクに保存し、ユーザーがブラウザを再起動した後にこれらの状態オブジェクトが復元されるため、状態オブジェクトのシリアル化表現には最大文字列サイズ 640k が課されます。 640k を超えるシリアル化表現を持つ状態オブジェクトを PushState() メソッドに渡すと、このメソッドは例外をスローします。さらに多くのスペースが必要な場合は、sessionStorage または localStorage を使用することをお勧めします。

title — このパラメータは現在 Firefox では無視されており、将来的に使用される可能性があります。将来の変更に備えて、空の文字列を渡しても安全です。もちろん、遷移先の状態の短いタイトルを渡すこともできます。 (翻訳者注: 現在、ほとんどのブラウザはこのパラメータをサポートしていないか、無視しています。代わりに null を使用することをお勧めします)

URL — このパラメータは、新しい履歴レコードのアドレスを提供します。ブラウザは、pushState() メソッドを呼び出した後はこの URL をロードしませんが、ユーザーがブラウザを再起動した後など、後でロードする可能性があることに注意してください。新しい URL は絶対アドレスである必要はありません。相対アドレスである場合は、現在の URL からの相対アドレスである必要があります。新しい URL は現在の URL と同じオリジンにある必要があります。そうでない場合、pushState() は例外をスローします。このパラメータはオプションです。指定しない場合は、ドキュメントの現在の URL に設定されます。

注: Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) から Gecko 5.0 (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2) では、転送されたオブジェクトは JSON を使用してシリアル化されます。 Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3) 以降、オブジェクトは構造化クローン アルゴリズムを使用してシリアル化され、より多様なオブジェクトを転送できるようになります。

場合によっては、pushState の呼び出しは window.location = "#foo" の設定と同じになります。この場合、両方のアクションで現在のページに関連する別の履歴レコードが作成され、アクティブ化されます。

しかし、pushState() には他の利点もあります:

新しい URL は、現在の URL と同じオリジンにある任意のアドレスにすることができます。逆に、window.location を設定すると、ハッシュのみを変更しない限り、同じページに留まります。

必要がない場合は、代わりに window.location を「#foo」に設定します。 "; 現在のハッシュが #foo でない場合にのみ、新しい履歴エントリが作成されます。

新しい履歴エントリに任意のデータを関連付けることができます。ハッシュベースのアプローチでは、関連するデータのすべてをエンコードする必要がありますデータを短い string に変換し、任意のデータを新しい履歴レコードに関連付けることができます。ハッシュベースのアプローチを使用して、すべての関連データを短い文字列にエンコードします。

新しい URL が古い URL とハッシュのみが異なる場合でも、pushState() メソッドによって hashchange イベントがアクティブ化されることはないことに注意してください。

XUL では、特別な XUL 要素を作成します。

他のドキュメントでは、空の URI namespace が作成されます。

構文編集

history.pushState(state, title, url);

サンプル編集

状態、タイトル、URL によって設定された新しいブラウザ履歴を作成します。

JavaScript

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

【相关推荐】

1. 特别推荐：“php程序员工具箱”V0.1版本下载

2. js中的window.history的用法（一）

3. js中的window.history的用法（二）

4. 深入了解h5中history特性--pushState、replaceState

5. h5中History API 对Web应用的影响

以上がh5のhistory.pushState()の使用例を詳しく紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。