ユーザーがページを去るときにajaxが読み込まれたhtmlを非表示にする方法

Question

今、ユーザーが自分のサイトのリンクをクリックすると、ajaxを使用してメインフレーム（ヘッダーとサイドバーページ全体に状態を維持する必要があるため、再ロードする必要はありません）。私は、urlバーを変更するためにpushStateとpopStateを使用します。

私は明示的にajaxコンテンツをキャッシュしません。私のサイトはうまく動作しますが、特に「バック」コマンドでは遅すぎます。

xhr html要求をキャッシュすると、サイトは内部的にうまく機能します。しかし、ユーザーが新しいURLを入力してサイトを離れる場合、 'back'コマンドを押すと、ヘッダーとサイドバーなしのメインビューのコンテンツのみがキャッシュから取り出され、正しく表示されません。

私は内部的にキャッシュすることはできますが、ユーザーがページを離れる場合はキャッシュをフラッシュする方法はありますか？

Answer 1

私は今あなたの説明を理解すると思います。

あなたのサイトで/page1.htmlにアクセスすると、ダウンロードされたHTMLにはメインコンテンツ+ヘッダー+サイドバーがあります。 /page2.htmlにアクセスするためのリンクをクリックすると、AJAXがページを読み込み、ダウンロードされたHTMLにはメインコンテンツのみが表示されます。私はあなたのサイトを離れ、その後のバックボタンで戻ったとき

ので、この時点でキャッシュは、

今フル/page1.htmlと部分/page2.htmlが含まれ、ブラウザが/ PAGE2をつかみます.htmlをキャッシュから削除します。しかしそれは部分的なページに過ぎず、あなたのサイトは "壊れます"。

理想的には、XMLHttpRequestでリクエストされた場合にのみブラウザが部分コンテンツを取得するようにします。 また、部分ページと全ページの両方をキャッシュできればいいです。

pjaxは、AJAXリクエストのURLクエリに_pjax=true paramを追加することで、この問題を解決します。私はこれがほとんどのシナリオでうまくいくはずだと思います。

pushState()に渡すURLにこのパラメータを追加しないように注意してください。

これに代わる方法は、全ページをダウンロードしてから、AJAXを使用するときは#main-viewを抽出することです。

もちろん、PJAXに切り替えることで他人の問題にすることができます（fragmentオプションを使用する必要があります）。

あなたのためにpushState（）を処理する別のJSライブラリは、私のHTMLDecorプロジェクトです。 HTMLDecorでは、ページにはメインコンテンツ+ <link>のみが含まれ、ヘッダー/フッター/サイドバーを含む別の（おそらく共有されている）HTMLページになります。 HTMLDecorはこれらをブラウザ内のページに追加します。ユーザーが別のページを参照するリンクをクリックすると、HTMLDecorはAJAXとpushStateを使用します。設定は必要ありません。もちろん、ブラウザがpushStateをサポートしていない場合、通常のリンクナビゲーションが行われます。