Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to force reloading a page when using browser back button?

I need to somehow detect that the user has pressed a browsers back button and reload the page with refresh (reloading the content and CSS) using jquery.

How to detect such action via jquery?

Because right now some elements are not reloaded if I use the back button in a browser. But if I use links in the website everything is refreshed and showed correctly.

IMPORTANT!

Some people have probably misunderstood what I want. I don't want to refresh the current page. I want to refresh the page that is loaded after I press the back button. here is what I mean in a more detailed way:

  1. user is visiting page1.
  2. while on page1 - he clicks on a link to page2.
  3. he is redirected to the page2
  4. now (Important part!) he clicks on the back button in browser because he wants to go back to page1
  5. he is back on the page1 - and now the page1 is being reloaded and something is alerted like "You are back!"
like image 567
John Doeherskij Avatar asked Oct 09 '22 18:10

John Doeherskij


People also ask

How do I trigger a refresh page?

reload() method reloads the current web page. The method gives the exact same result as pressing the RELOAD button in your browser. The JavaScript reload page method loads the page from the cache by default. If the forceGet property is set to true, the page is reloaded from the server.

What happens when browser Back button is pressed?

For pages that are set as non-cached, the browser reloads the page from the server when you press Back, as though it was the first time you are visiting it. For cached pages, the browser displays it out of the cache, which is much faster.

How do I force a HTML page to refresh?

In most web browsers you can force a one-time page load from the server by holding down the shift key while clicking on the Reload or Refresh button.


1 Answers

You can use pageshow event to handle situation when browser navigates to your page through history traversal:

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();
  }
});

Note that HTTP cache may be involved too. You need to set proper cache related HTTP headers on server to cache only those resources that need to be cached. You can also do forced reload to instuct browser to ignore HTTP cache: window.location.reload( true ). But I don't think that it is best solution.

For more information check:

  • Working with BFCache article on MDN
  • WebKit Page Cache II – The unload Event by Brady Eidson
  • pageshow event reference on MDN
  • Ajax, back button and DOM updates question
  • JavaScript - bfcache/pageshow event - event.persisted always set to false? question
  • Back/Forward Cache
like image 140
Leonid Vasilev Avatar answered Oct 12 '22 07:10

Leonid Vasilev