Preventing loading safari from cache when you press the back button

Question

There was a problem downloading old videos with safari loading when you click the back button. I tried adding onunload = "to the body tag (mentioned here Cache Prevention in the back panel in Safari 5 ), but in this case it does not work.

Is there a way to prevent Safari from caching on a specific page?

Answer 1

Your problem is caused by the back-forward cache . It is supposed to keep the full state of the page when the user moves. When a user moves back using the back button, you can quickly boot from the cache. This is different from a regular cache that only caches HTML code.

When loading a page for bfcache onload event will not be fired. Instead, you can check the persisted property of the onpageshow events. It is set to false on initial page load. When a page is loaded from bfcache, it is true.

Kludgish's solution is to force a reload when loading a page from bfcache.

 window.onpageshow = function(event) { if (event.persisted) { window.location.reload() } }; 

If you are using jQuery, follow these steps:

 $(window).bind("pageshow", function(event) { if (event.originalEvent.persisted) { window.location.reload() } }); 

Answer 2

Yes, Safari does not handle back / back button cache in the same way as Firefox and Chrome. In particular, an iframe, such as a vimeo or youtube video, is cached, although there is a new iframe.src.

I found three ways to handle this. Choose the best for your business. Solutions Tested on Firefox 53 and Safari 10.1

1. Determine if the user uses the back / forward button, then reload the entire page or reload only cached frames, replacing src

 if (!!window.performance && window.performance.navigation.type === 2) { // value 2 means "The page was accessed by navigating into the history" console.log('Reloading'); //window.location.reload(); // reload whole page $('iframe').attr('src', function (i, val) { return val; }); // reload only iframes } 

2. reload the whole page if the page is cached

 window.onpageshow = function (event) { if (event.persisted) { window.location.reload(); } }; 

3. delete the page from the history so that users cannot visit the page again using the back / forward buttons

 $(function () { //replace() does not keep the originating page in the session history, document.location.replace("/Exercises#nocache"); // clear the last entry in the history and redirect to new url }); 

Answer 3

All of these answers are a bit of a hack. In modern browsers (safari) only onpageshow work,

 window.onpageshow = function (event) { if (event.persisted) { window.location.reload(); } }; 

but on slow devices, sometimes you will see for a second second cached view before it reboots. The correct way to solve this problem is to correctly configure Cache-Control to respond to the server one below.

'Cache-Control', 'no-cache, max-age=0, must-revalidate, no-store'

Answer 4

You can use the binding and see the value of the location of the href document;

Start with http://acme.co/ , add something to this place, for example '#b';

So, now your URL is http://acme.co/#b , when a person clicks the back button, he returns to http://acme.co , and the interval check function sees the absence of a set hash tag, clears the interval and downloads the referring URL with a timestamp attached to it.

There are some side effects, but I will leave you to understand them;)

 <script> document.location.hash = "#b"; var referrer = document.referrer; // setup an interval to watch for the removal of the hash tag var hashcheck = setInterval(function(){ if(document.location.hash!="#b") { // clear the interval clearInterval(hashCheck); var ticks = new Date().getTime(); // load the referring page with a timestamp at the end to avoid caching document.location.href.replace(referrer+'?'+ticks); } },100); </script> 

This is untested, but it should work with minimal setup.

Answer 5

The behavior is related to the Safari Back / Forward cache. You can find out about this in the relevant Apple documentation: http://web.archive.org/web/20070612072521/http://developer.apple.com/internet/safari/faq.html#anchor5

Apple's own solution for Apple is to add an empty iframe to your page:

 <iframe style="height:0px;width:0px;visibility:hidden" src="about:blank"> this frame prevents back forward cache </iframe> 

(The previous accepted answer seems really true, just wanted to clean up the documentation and other potential fix)

Answer 6

First of all, paste the code into your code:

 <input id="reloadValue" type="hidden" name="reloadValue" value="" /> 

then run jQuery:

 jQuery(document).ready(function() { var d = new Date(); d = d.getTime(); if (jQuery('#reloadValue').val().length == 0) { jQuery('#reloadValue').val(d); jQuery('body').show(); } else { jQuery('#reloadValue').val(''); location.reload(); } });