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.
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.
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.
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.
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"); });
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.
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?
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With