複雑なHTML5およびJavaScriptアプリケーションでブラウザ履歴を変更する方法

スナッピータイトルが好きではありませんか？！ WebMailクライアントなどの洗練されたアプリケーションを検討してください。本質的に、それは単一のHTMLページで実行されている複雑なJavaScriptプログラムです。ユーザーはURLをロードし、電子メールのリストが表示されます。タイトルをクリックすると、電子メールコンテンツがAjaxを使用して取得されて表示されます。彼らは今、メールリストに戻りたいと思っています。彼らは何をしますか？… …ブラウザのバックボタンをクリックします。 強打。アプリケーションが閉じて、アプリケーションにアクセスする前に表示していたページに戻ります。または、新しいブラウザタブの場合、バックボタンは無効になり、クリックできません。 だから私たちには問題があります。当社のWebメールクライアントは、ほとんどのユーザーが理解している1つのブラウザコントロールをサポートしていません。解決策があります。一部には、URLのハッシュマーク（#NAME）を変更して、状態を保持できるようにするものもあります。完璧ではありませんが、すべてのブラウザで機能します。 幸いなことに、この問題はHTML5 History.PushStateで対処されています およびhistory.onpopstateイベントと組み合わせたhistory.replacestateメソッド。 history.pushstate（）デモンストレーションページをお試しください… テクニックはさわやかでシンプルです：

1. 状態が変更されたとき、例えばユーザーは電子メールを開きます。histhor.pushstate（）は状態情報に渡されて実行されます。これにより、バックボタンが有効になりますが、重要なことには、ユーザーをページから移動しません。
history.pushState（）を必要に応じて何度も実行するか、history.replaceState（）を使用して現在の状態を変更できます。
2. ユーザーがクリックする（またはフォワード）をクリックすると、window.onpopstateイベントが起動されます。ハンドラー機能は、関連する状態を取得し、適切な画面を表示できます。
欠点？ V10が到着するまでIEの互換性を忘れてください。 IE9以下をサポートする必要がある場合、history.jsやhtml5-history-apiを含む多くのシムがあります 。 いくつかのコードを書きましょう。 Ajaxリクエストの結果を表示したばかりであると仮定します。
3. どこ：

objは任意のJavaScriptオブジェクトです。これを使用して州の情報を保持できます。 {「表示」：「emailContent」、「item」：123};

タイトルはオプションのタイトル

です

URLはオプションのURLです。 URLは何でもかまいません - ブラウザはそのページにジャンプしませんが、ユーザーがページをリロードするか、ブラウザを再起動した場合、 できます。ほとんどの場合、パラメーターまたはハッシュ名を使用する必要があります。 ？view = emailcontent＆item = 123;アプリケーションは、スタートアップでこれらの値を分析し、同じ場所に戻ることができます。

history.replacestate（）には同一の引数があり、現在の状態を新しい状態に置き換える場合にのみ使用されます。 これで、ブラウザの背面または次のボタンがクリックされた後、ウィンドウポップステートイベントが発射されるときに実行されるハンドラー関数が必要です。 URLの場所はdocument.location（document.location.search and document.location.hashで決定できます。 それぞれパラメーターとハッシュ名を返します）。 pushState（）またはlateState（）によって設定された歴史的な状態オブジェクトは、イベントオブジェクトの状態プロパティから取得されます。情報を使用して、適切な画面を表示できます。 history.pushstate（）デモンストレーションページをお試しください… history.pushstateボタンを数回クリックしてから、バックバックしてログで何が起こるかを確認します。 とても便利です。 Webアプリケーションで戻って次のボタンの問題に遭遇しましたか？ JavaScript History PushState

// Ajax request
...
// display result
...

// modify history
history.pushState(obj, title, url);

に関するよくある質問（FAQ）

JavaScript History PushStateの主な機能は何ですか？

JavaScript History PushStateは、ブラウザの履歴を操作できる方法です。履歴APIの一部であり、履歴エントリを追加できます。これは、ページをリロードせずにURLを変更できる単一ページアプリケーションを作成する場合に特に便利です。ユーザーがブラウザのフォワードボタンとバックボタンをナビゲートした場合でも、ユーザーエクスペリエンスとアプリケーションの状態を維持するのに役立ちます。 3つのパラメーターを取得することにより、状態オブジェクト、タイトル（現在ほとんどのブラウザでは無視されています）、およびURL。 PushStateメソッドが呼び出されると、ブラウザのHistoryスタックに新しい履歴エントリが作成されます。この新しいエントリは、指定された状態オブジェクトとURLに関連付けられています。ユーザーがこの新しいエントリに移動すると、ポップステートイベントが起動され、状態オブジェクトがアプリケーションに渡されます。 History PushStateは、すべての最新のブラウザで広くサポートされています。ただし、Internet Explorer 9以前のバージョンではサポートされていません。したがって、古いブラウザ向けのアプリケーションを開発している場合は、ハッシュベースのURLにポリフィルまたはフォールバックを使用する必要がある場合があります。

javascriptのプッシュステートと置換メソッドの違いは何ですか？

プッシュステートと置換メソッドの両方は、履歴APIの一部であり、ブラウザの履歴を操作するために使用されます。それらの主な違いは、プッシュステートが新しい履歴エントリを作成し、履歴スタックに追加することです。一方、交換はスタックに新しい履歴エントリを追加せずに現在の履歴エントリを変更します。 JavaScriptで？

アクティブな履歴エントリが変更されるたびにポップステートイベントが起動されます。履歴エントリがPushStateによって作成された場合、そのエントリに関連付けられた状態オブジェクトはアプリケーションに渡されます。イベントリスナーをウィンドウオブジェクトに追加し、イベントが起動されたときに実行される関数を定義することにより、ポップスティートイベントを処理できます。 >状態オブジェクトは、履歴エントリに関連付けられたJavaScriptオブジェクトです。このオブジェクトには、履歴エントリに関連付ける任意の種類のデータを含めることができます。ユーザーが履歴エントリに移動すると、状態オブジェクトがアプリケーションに渡され、アプリケーションの状態を復元できます。はい、はい、JavaScript History PushStateを使用する主な利点の1つは、ページをリロードせずにURLを変更できることです。これは、アプリケーションの現在の状態を反映するようにURLを変更できる単一ページアプリケーションを作成する場合に特に便利です。

シングルページアプリケーションでのJavaScript History PushStateの役割は何ですか？

シングルページアプリケーションでは、JavaScript History PushStateがユーザーエクスペリエンスを維持する上で重要な役割を果たします。これにより、ページをリロードせずにアプリケーションの現在の状態を反映するようにURLを変更できます。これは、ユーザーがアプリケーション状態を失うことなくブラウザのフォワードボタンとバックボタンを使用してアプリケーションをナビゲートできることを意味します。 JavaScript History PushStateを使用して、各ナビゲーションアクションの履歴エントリを追加してナビゲーションシステムを作成します。ユーザーが履歴エントリに移動すると、そのエントリに関連付けられた状態オブジェクトを使用して、アプリケーションの状態を復元できます。これにより、ページをリロードせずにシームレスなナビゲーションエクスペリエンスを作成できます。いくつかの制限があります。たとえば、Internet Explorer 9以前のバージョンではサポートされていません。また、同じ起源の履歴エントリのみを追加することができます。つまり、それを使用して異なるドメインの履歴エントリを追加することはできません。

以上が複雑なHTML5およびJavaScriptアプリケーションでブラウザ履歴を変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。