JavaScript HTML5 スクリプト プログラミング -- 「履歴状態管理」で注意すべき重要なポイント_html/css_WEB-ITnose

履歴状態の管理は、現代の Web アプリケーション開発における難しい点です。最新の Web アプリケーションでは、ユーザーの各操作が必ずしも新しいページを開くとは限らないため、「戻る」ボタンと「進む」ボタンの機能が失われ、ユーザーが異なる状態を切り替えることが困難になります。

この問題を解決するには、

• hashchange イベント (第 13 章で説明) を使用することをお勧めします。 HTML5 は、

• 履歴オブジェクトを更新することで履歴状態を管理するのに便利です。

hashchange イベントを通じて、URL のパラメータがいつ変更されたか、つまり、いつ反応すべきかを知ることができます。状態管理 API を使用すると、新しいページを読み込まずにブラウザの URL を変更できます。これを行うには、

• history.pushState() メソッドを使用する必要があります。このメソッドは、状態オブジェクト、新しい状態のタイトル、およびオプションの相対 URL の 3 つのパラメーターを受け取ることができます。

例:

history.pushState({name:"Nicholas"}, "Nicholas' page", "nicholas.html");

• PushState() メソッドの実行後、新しい状態情報が履歴状態スタックに追加され、ブラウザのアドレス バーも新しい相対 URL になります。

ただし、ステータスが変化しても、ブラウザは実際にサーバーにリクエストを送信しません。location.href をクエリすると、アドレス バーと同じアドレスが返されます。さらに、現在ブラウザーでは 2 番目のパラメーターが実装されていないため、空の文字列または短いタイトルを渡すだけで済みます。最初のパラメータは、ページ状態を初期化するためにできる限り多くの情報を提供する必要があります。

pushState() は新しい履歴状態を作成するため、「戻る」ボタンも使用できることがわかります。 「戻る」ボタンを押すと、ウィンドウ オブジェクトの

• Popstate イベントがトリガーされます。 Popstate イベントのイベント オブジェクトには

• state 属性があり、最初に最初のパラメーターとして PushState() に渡された state オブジェクトが含まれます。

例:

EventUtil.addHandler(window, "popstate", function(event){    var state = event.state;    if (state){   //第一个页面加载时state为空        processState(state);    }});

この状態オブジェクトを取得した後、状態オブジェクト内のデータで表される状態にページをリセットする必要があります (ブラウザーがこれを自動的に実行しないため)。ブラウザによってロードされる最初のページには状態がないため、ブラウザによってロードされる最初のページに戻るために「戻る」ボタンをクリックすると、event.state 値は null になることに注意してください。

現在の状態を更新するには、

• replaceState() を呼び出すことができます。渡されるパラメータは、pushState() の最初の 2 つのパラメータと同じです。このメソッドを呼び出しても、履歴状態スタックに新しい状態は作成されず、現在の状態が上書きされるだけです。

例:

history.replaceState({name:"Greg"}, "Greg's page");

HTML5 履歴状態管理をサポートするブラウザには、Firefox 4 以降、Safari 5 以降、Opera 11.5 以降、Chrome などがあります。 Safari および Chrome では、pushState() または replaceState() に渡される状態オブジェクトに DOM 要素を含めることはできません。 Firefox は、状態オブジェクトに DOM 要素を含めることをサポートしています。 Opera は、現在の状態の状態オブジェクトを返すhistory.state プロパティもサポートしています。