How to force page reload when using the "Back back" button?

Question

I need to somehow find that the user has pressed the browsers return button and reloaded the page with refresh (reloading the content and CSS) using jquery.

How to detect such an action through jquery?

Because now some elements are not reloading if I use the back button in the browser. But if I use the links on the website, everything is updated and displayed correctly.

IMPORTANT!

Some people probably misunderstood what I want. I do not want to refresh the current page. I want to refresh the page loaded after clicking the back button. here is what I mean in more detail:

• user visits page 1.
• while on page 1 - he clicks on the link to page2.
• it redirects to page2
• now (the important part!) he clicks the back button in the browser because he wants to return to page1
• he returned to page1 - and now page1 reloads, and something is warned, like "You are back!"

Answer 1

You can use the pageshow event to handle a situation when the browser goes to your page through a history 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(); } }); 

Please note that the HTTP cache may also be involved. You need to set the proper HTTP headers related to caching on the server to cache only the resources that need to be cached. You can also force a reboot in the instuct browser to ignore the HTTP cache: window.location.reload( true ) . But I do not think this is the best solution.

For more information check:

• Working with BFCache MDN article
• WebKit Page Cache II - Brady Aidson Unload Event
• link to the pagehow event on MDN
• Ajax back button and question about DOM updates
• Javascript bfcache / pageshow - event.persisted event always false? question

Answer 2

It has been a long time since it was published, but I found a more elegant solution if you do not need support for older browsers.

You can do a check with

 performance.navigation.type 

The documentation, including browser support, is here: https://developer.mozilla.org/en-US/docs/Web/API/Performance/navigation

To see if a page has been loaded from history using back, you can do

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

2 indicates that the page was accessed by going to history. Other features are-

0: access to the page was through a link, a bookmark, sending a form or script, or by entering a URL in the address bar.

1: page was accessed by clicking the "Reload" button or the Location.reload () method.

255: any other way

They are described in detail here: https://developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigation

Answer 3

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 you press the back or forward button with ajax.

if this does not happen, there should be an incorrect configuration in another part of the script.

For example, it may not restart if one of the examples is used in the previous message window.history.pushState('', null, './');

so when you use history.pushState(); make sure you use it correctly.

The suggestion in most cases you just need:

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

There is no window.history ... and make sure the URL is defined.

Hope this helps.

Answer 4

You should use hidden input as an update indicator with a value of "no":

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

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 the back button, the values ​​in the hidden fields retain the same value as when you first left the page.

So, the first time the page loads, the input value will be "no." When you return to the page, it will be “yes” and your JavaScript code will cause an update.

Answer 5

Since performance.navigation deprecated, you can try this:

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

Answer 6

Rebooting is easy. You should use:

 location.reload(true); 

And finding back:

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

Answer 7

I found the best answer and it works great for me.

just use this simple script in your link

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

or button click event

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

when you use this, first refresh your page and then go to the next page, when you go back, it will have the last updated state.

I used it as an entrance to CAS and give me what I want. Hope this helps .......

details found here

Answer 8

The alternative that solved the problem for me is to disable the cache for the page. This forces the browser to receive the page from the server instead of using the cached version:

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

Answer 9

The best way is to set the timeout using jquery.

 function explode(){ alert("YOUR RELOAD PAGE HERE!"); } setTimeout(explode, 1); 

In milliseconds, it will run the function once, so your users may not even notice its operation.

I use it without a problem.