How to force reloading a page when using browser back button

Question

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    user is visiting page1  while on page1 - he clicks on a link to page2  he is redirected to the page2 now  Important part   he clicks on the back button in browser because he wants to go back to page1 he is back on the page1 - and now the page1 is being reloaded and something is alerted like  You are back

User · Answer

It s been a while since this was posted but I found a more elegant solution if you are not needing to support old browsers  You can do a check with performance navigation type  Documentation including browser support is here  https   developer mozilla org en-US docs Web API Performance navigation So to see if the page was loaded from history using back you can do if performance navigation type    2      location reload true      The 2 indicates the page was accessed by navigating into the history  Other possibilities are- 0 The page was accessed by following a link  a bookmark  a form submission  or a script  or by typing the URL in the address bar  1 The page was accessed by clicking the Reload button or via the Location reload   method  255  Any other way These are detailed here  https   developer mozilla org en-US docs Web API PerformanceNavigation  Note Performance navigation type is now deprecated in favour of PerformanceNavigationTiming type which returns  navigate     reload     back forward     prerender   https   developer mozilla org en-US docs Web API PerformanceNavigationTiming type

User · Answer

Just use jquery    jQuery  document   ready function              Use this inside your document ready jQuery       window  on  popstate   function           location reload true                 The above will work 100  when back or forward button has been clicked using ajax as well   if it doesn t  there must be a misconfiguration in a different part of the script    For example it might not reload if something like one of the example in the previous post is used window history pushState     null          so when you do use history pushState    make sure you use it properly    Suggestion in most cases you will just need    history pushState url      url      No window history    and make sure url is defined   Hope that helps

User · Answer

I found the best answer and it is working perfectly for me  just use this simple script in your link    lt A HREF  javascript history go 0   gt next page lt  A gt    or the button click event   lt INPUT TYPE  button  onClick  history go 0   VALUE  next page  gt    when you use this  you refresh your page first and then go to next page  when you return back it will be having the last refreshed state   I have used it in a CAS login and gives me what I want  Hope it helps             details found from here

User · Answer

Since performance navigation is now deprecated  you can try this   var perfEntries   performance getEntriesByType  navigation     if  perfEntries 0  type      back forward         location reload true

User · Answer

Currently this is the most up to date way reload page if the user clicks the back button   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      See here for source

User · Answer

You should use a hidden input as a refresh indicator  with a value of  no     lt input type  hidden  id  refresh  value  no  gt    Now using jQuery  you can check its value     document  ready function e        var  input       refresh          input val       yes    location reload true     input val  yes          When you click on the back button  the values in hidden fields retain the same value as when you originally left the page   So the first time you load the page  the input s value would be  no   When you return to the page  it ll be  yes  and your JavaScript code will trigger a refresh

User · Answer

Reload is easy  You should use   location reload true     And detecting back is     window history pushState     null             window  on  popstate   function        location reload true

User · Answer

An alternative that solved the problem to me is to disable cache for the page  That make the browser to get the page from the server instead of using a cached version   Response AppendHeader  Cache-Control   no-cache  no-store  must-revalidate    Response AppendHeader  Pragma    no-cache    Response AppendHeader  Expires    0

User · Answer

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   amp  amp                                 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

User · Answer

Use following meta tag in your html header file  This works for me    lt meta http-equiv  Pragma  content  no-cache  gt

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

Examples related to javascript

Examples related to jquery

Examples related to browser

Examples related to browser-cache

Examples related to page-refresh