ブラウザの戻るボタンを使用しているときにページを強制的に再読み込みするにはどうすればよいですか？

ユーザーがブラウザーの戻るボタンを押したことを何らかの方法で検出し、jqueryを使用してページを更新（コンテンツとCSSの再読み込み）で再読み込みする必要があります。

jqueryを介してそのようなアクションを検出する方法は？

ブラウザで戻るボタンを使用すると、現在一部の要素が再読み込みされないためです。しかし、ウェブサイトでリンクを使用すると、すべてが更新され、正しく表示されます。

重要！

おそらく私が欲しいものを誤解している人もいます。現在のページを更新したくありません。戻るボタンを押した後に読み込まれたページを更新したい。これが私がより詳細に意味することです：

1. ユーザーがpage1にアクセスしています。
2. ページ1にいる間-彼はページ2へのリンクをクリックします。
3. 彼はpage2にリダイレクトされます
4. 今（重要な部分です！）彼はページ1に戻りたいので、ブラウザの戻るボタンをクリックします
5. 彼はpage1に戻っています-そして今page1がリロードされており、「You areback！」のような警告が表示されます。

pageshowイベントを使用して、ブラウザが履歴トラバーサルを介してページに移動するときの状況を処理できます。

window.addEventListener( "pageshow", function ( event ) {
  var historyTraversal = event.persisted || 
                         ( typeof window.performance != "undefined" && 
                              window.performance.navigation.type === 2 );
  if ( historyTraversal ) {
    // Handle page restore.
    window.location.reload();
  }
});

HTTPキャッシュも関係している可能性があることに注意してください。キャッシュする必要のあるリソースのみをキャッシュするには、サーバーに適切なキャッシュ関連のHTTPヘッダーを設定する必要があります。HTTPキャッシュを無視するために、Instuctブラウザに強制的にリロードすることもできますwindow.location.reload( true )。しかし、私はそれが最善の解決策だとは思いません。

詳細については、以下を確認してください。

• MDNに関するBFCacheの記事の操作
• WebKitページキャッシュII– BradyEidsonによるアンロードイベント
• MDNのpageshowイベントリファレンス
• Ajax、戻るボタン、およびDOM更新の質問
• JavaScript-bfcache / pageshow event-event.persistedは常にfalseに設定されていますか？質問

これが投稿されてからしばらく経ちましたが、古いブラウザをサポートする必要がない場合は、よりエレガントな解決策を見つけました。

あなたはでチェックをすることができます

performance.navigation.type

ブラウザのサポートを含むドキュメントはこちらです：https：//developer.mozilla.org/en-US/docs/Web/API/Performance/navigation

したがって、ページが履歴からロードされたかどうかを確認するには、

if(performance.navigation.type == 2){
   location.reload(true);
}

2ページが歴史の中にナビゲートすることによってアクセスされたことを示します。他の可能性は-

0:このページにアクセスするには、リンク、ブックマーク、フォーム送信、またはスクリプトをたどるか、アドレスバーにURLを入力します。

1:このページには、[再読み込み]ボタンをクリックするか、Location.reload（）メソッドを使用してアクセスしました。

255: その他の方法で

これらの詳細はここにあります：https：//developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigation

注Performance.navigation.typeは非推奨になり、'navigate' / 'reload' / 'back_forward' / 'prerender'を返すPerformanceNavigationTiming.typeが優先されます：https：//developer.mozilla.org/en-US/docs/Web / API / PerformanceNavigationTiming / type

jqueryを使用するだけです：

jQuery( document ).ready(function( $ ) {

   //Use this inside your document ready jQuery 
   $(window).on('popstate', function() {
      location.reload(true);
   });

});

上記は、ajaxを使用して戻るまたは進むボタンがクリックされた場合にも100％機能します。

そうでない場合は、スクリプトの別の部分に設定ミスがあるはずです。

たとえば、前の投稿の例のようなものが使用されている場合、リロードされない可能性があります window.history.pushState('', null, './');

したがって、使用history.pushState(); するときは、適切に使用するようにしてください。

ほとんどの場合、必要な提案は次のとおりです。

history.pushState(url, '', url); 

いいえwindow.history ...とは確認していないURLが定義されています。

お役に立てば幸いです。

以来performance.navigation廃止され、あなたはこれを試すことができます。

var perfEntries = performance.getEntriesByType("navigation");

if (perfEntries[0].type === "back_forward") {
    location.reload(true);
}

値が「no」の非表示の入力を更新インジケーターとして使用する必要があります。

<input type="hidden" id="refresh" value="no">

jQueryを使用して、その値を確認できます。

$(document).ready(function(e) {
    var $input = $('#refresh');

    $input.val() == 'yes' ? location.reload(true) : $input.val('yes');
});

戻るボタンをクリックすると、非表示フィールドの値は、最初にページを離れたときと同じ値を保持します。

したがって、ページを初めてロードするとき、入力の値は「no」になります。ページに戻ると、「はい」になり、JavaScriptコードが更新をトリガーします。

私にとって問題を解決した別の方法は、ページのキャッシュを無効にすることです。これにより、ブラウザはキャッシュされたバージョンを使用する代わりにサーバーからページを取得します。

Response.AppendHeader("Cache-Control","no-cache, no-store, must-revalidate");
Response.AppendHeader("Pragma", "no-cache");
Response.AppendHeader("Expires", "0");

現在、これは、ユーザーが[戻る]ボタンをクリックした場合の最新のリロードページです。

const [entry] = performance.getEntriesByType("navigation");

// Show it in a nice table in the developer console
console.table(entry.toJSON());

if (entry["type"] === "back_forward")
    location.reload();

ソースについてはこちらをご覧ください

リロードは簡単です。次を使用する必要があります。

location.reload(true);

そして、バックを検出することは：

window.history.pushState('', null, './');
  $(window).on('popstate', function() {
   location.reload(true);
});

あなたのhtmlヘッダーファイルで次のメタタグを使用してください、これは私のために働きます。

<meta http-equiv="Pragma" content="no-cache">

私は最良の答えを見つけました、そしてそれは私にとって完璧に働いています

リンクでこの簡単なスクリプトを使用するだけです

<A HREF="javascript:history.go(0)">next page</A>

またはボタンクリックイベント

<INPUT TYPE="button" onClick="history.go(0)" VALUE="next page">

これを使用する場合は、最初にページを更新してから次のページに移動します。戻ると、最後に更新された状態になります。

CASログインで使用しましたが、必要なものが表示されます。それが役に立てば幸い .......

詳細はこちらから