現在、ユーザーがサイトのリンクをクリックすると、ajax を使用してメイン フレームのコンテンツのみを置き換えます (ヘッダーとサイドバーはページ間で状態を維持する必要があるため、それらをリロードしたくありません)。pushState と popState を使用して URL バーを変更します。
私は明示的に ajax コンテンツをキャッシュせず、私のサイトは正常に動作しますが、特に「戻る」コマンドでは少し遅すぎます。
xhr html リクエストをキャッシュすると、サイトは内部的にうまく機能します。ただし、ユーザーが新しい URL を入力してサイトを離れる場合、ユーザーが「戻る」コマンドを押すと、スタイルが設定されていないヘッダーとサイドバーのないメイン ビューのコンテンツのみがキャッシュから取り出され、サイトは表示されません。 t 正しく表示されます。
内部でキャッシュを保持し、ユーザーがページを離れた場合にキャッシュをフラッシュする方法はありますか?
私はあなたの説明を今理解していると思います。
あなたのサイトの /page1.html にアクセスすると、ダウンロードされた HTML にはメイン コンテンツ + ヘッダー + サイドバーが含まれます。リンクをクリックして /page2.html にアクセスすると、AJAX がページをロードし、ダウンロードされた HTML にはメイン コンテンツのみが含まれます。
したがって、この時点で、キャッシュには完全な /page1.html と部分的な /page2.html が含まれています。
これで、サイトを離れて [戻る] ボタンで戻ると、ブラウザはキャッシュから /page2.html を取得します。しかし、それはページの一部に過ぎず、あなたのサイトは「壊れて」しまいます。
理想的には、XMLHttpRequest で要求された場合にのみ、ブラウザーが部分的なコンテンツを取得するようにする必要があります。また、部分ページと全ページの両方をキャッシュできるとよいでしょう。
pjax_pjax=trueは、AJAX リクエストの URL クエリにパラメーターを追加することで、この問題に対処します。これはほとんどのシナリオでうまくいくはずだと思います。
に渡す URL にこのパラメーターを追加しないことに注意してくださいpushState()。
これに代わる方法は、常にページ全体をダウンロードしてから、#main-viewAJAX を使用するときに抽出することです。
もちろん、PJAX に切り替えることで、これを他人の問題にすることができます (fragmentオプションを使用する必要があります)。
pushState() を処理するもう 1 つの JS ライブラリは、私のHTMLDecorプロジェクトです。HTMLDecor を使用すると、ページにはメイン コンテンツ<link>と、ヘッダー/フッター/サイドバーを含む別の (おそらく共有されている) HTML ページのみが含まれます。HTMLDecor はこれらをブラウザー内からページに追加します。ユーザーがリンクをクリックして別のページを参照すると、HTMLDecor は AJAX と pushState を使用します。構成は必要ありません。もちろん、ブラウザーが pushState をサポートしていない場合は、通常のリンク ナビゲーションが行われます。