web-dev-qa-db-ja.com

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

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

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

なぜなら、ブラウザで戻るボタンを使用すると、現在いくつかの要素がリロードされないからです。ただし、Webサイトでリンクを使用すると、すべてが更新され、正しく表示されます。

重要！

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

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

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ヘッダーを設定する必要があります。 instuctブラウザに強制的にリロードしてHTTPキャッシュを無視することもできます：window.location.reload( true )。しかし、私はそれが最善の解決策だとは思わない。

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

48
Leonid Vasilev

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

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

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

30
James

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 ...はありません。また、rlが定義されていることを確認してください。

お役に立てば幸いです。

16
Francesco

「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コードが更新をトリガーします。

5
Dhiraj

performance.navigationは非推奨になったため、これを試すことができます。

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

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

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

リンクでこの単純なスクリプトを使用してください

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

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

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

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

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

詳細は こちら

0
muhammed aslam

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

location.reload(true);

そして、戻って検出する：

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