Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Reload the site when reached via browsers back button

Tags:

Problem: I have a site with dynamic content which needs to be reloaded every time the user sees it. This includes the use case when a user hits the back button on an another site and comes to the site needed to be reloaded. Most (all?) browsers don't refresh the site after this event.

My solution (which isn't quite working): http://www.hunlock.com/blogs/Mastering_The_Back_Button_With_Javascript

window.onbeforeunload = function () {     // This function does nothing.  It won't spawn a confirmation dialog     // But it will ensure that the page is not cached by the browser. } 

But it still doesn't refresh the page.

Any ideas what can affect/block the desired behavior? Respectively any other solution suggestions for this problem?

edit:

Set following:

Cache-Control   private, must-revalidate, max-age=0 Expires Sat, 26 Jul 1997 05:00:00 GMT Pragma  no-cache 

and:

<meta name="cache-control" content="no-cache" /> <meta name="expires" content="0" /> <meta name="pragma" content="no-cache" /> 

still no success.

like image 933
sorgenkind Avatar asked Jan 28 '12 14:01

sorgenkind


People also ask

What happens when you press the Back button on browser?

A back button in the browser lets you back-up to the copies of pages you visited previously. The web browser's back and next buttons work well with web sites that provide information that changes infrequently, such as news and shopping web sites.

What is the browser reload button?

On any Internet browser, you can press the F5 function key to reload a page. If you don't have an F5 key, you may also press the Ctrl + R shortcut keys. Pressing Ctrl + F5 forces a full refresh of the page, causing the browser not to load any page content from cache.

How do I press reload in my browser?

For Windows in Chrome or Edge, the keyboard shortcut Ctrl + F5 (or Ctrl + Reload) refreshes. For Mac, hold Cmd-Shift-R or Shift-Reload. Most browsers also have a refresh button next to the URL.

How do I stop browser reload back button?

You have to detect browser back button event and pass as an input of the page you want do prevent URL reload that indicates you if you came from a back button click. this code: $(window). on('popstate', function(event) { alert("pop"); });


2 Answers

You should use a hidden input as a refresh 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 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.

like image 104
Ali Al-Naimi Avatar answered Oct 11 '22 22:10

Ali Al-Naimi


After trying out various different solutions I have found that the JavaScript Navigation Timing API works best for detecting interactions with the back button.

All you have to do is this:

if(!!window.performance && window.performance.navigation.type == 2) {     window.location.reload(); } 

And it works well with all major browsers: http://caniuse.com/#search=Navigation%20Timing%20API

Is My Page Being Loaded from the Browser Cache?

like image 20
Hasan Akhtar Avatar answered Oct 11 '22 23:10

Hasan Akhtar