AJAX Web ページはブラウザーの前進および後退機能を保持します_JavaScript スキル

AJAX が頻繁に使用されている一部のページでは、更新する勇気がない場合があります。更新すると、元のページとは大きく異なるページが表示される可能性があります。特定のページのコンテンツが頻繁に更新されるときに AJAX を使用するかどうかの問題については説明しません。この記事では、ブラウザーの進む、戻る、更新などの機能の保持について簡単に説明します。
ここでは、2 つのタブを持つページを想定しており、それぞれに大量のテキストと、場合によっては画像が含まれています。 Tab2 のコンテンツが良いと感じたら、お気に入りに追加するか、友達に送信してください。次回、お気に入りから開くか、友人がこのリンクをクリックすると、Tab1 のコンテンツが表示される可能性が高く、その後、見たいコンテンツを表示するには Tab2 を再度クリックする必要があります。ページのロジックがより複雑な場合は、表示したいコンテンツに戻るために複数の手順を実行する必要がある場合があり、これは良い経験ではありません。
更新やお気に入りへの追加などの機能が正しく動作するには、現在の操作が URI に反映される必要があります。ただし、URI を変更してもページは更新されないため、URI のフラグメントを変更することで更新できます。たとえば、Tab1 をクリックすると URI が http://www.example.com/example.html#tab1 に変更され、Tab2 をクリックすると URI が http://www.example.com/example.html#tab2 に変更されます。

コードをコピー コードは次のとおりです。

function ShowTab1() {
$ ("# tab2").hide();
$("#tab1").show();
window.location.hash = "#tab1";
関数 ShowTab2 () {
$("#tab1").hide();
$("#tab2").show();
window.location.hash = "#tab2";これにより、URI が変更されましたが、http://www.example.com/example.html#tab1 経由か http://www.example.com/example 経由かは関係ありません。 .html# tab2 でアクセスしたページには Tab1 の内容が表示されるため、ページの読み込み時に # 以降の内容を読み取る必要があります。

コードをコピー

コードは次のとおりです。 $(document).ready(ShowTab( )); 関数 ShowTab() { if (window.location.hash == "#tab2")

else

ShowTab1();


このように、更新やお気に入りへの追加などの機能は既に利用可能ですが、進む・戻るはやはり面倒です。これら 2 つのボタンが使用可能になりましたが、クリックしても Web ページの内容は変わりません。 bodyのonhashchangeイベントを使用する必要があります。 onhashchange イベントはすべてのブラウザでサポートされているわけではありません。このイベントをサポートしていないブラウザでも # 以降のコンテンツの変更を検出するには、window.location.hash の変更を定期的に検出する関数を作成するか、 onhashchange イベントを自分で実行します。

サンプル コード パッケージのダウンロード
(Visual Studio 2010)