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

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

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)