Prevent Safari Loading from Cache When Back Button Is Clicked

Prevent safari loading from cache when back button is clicked

Your problem is caused by back-forward cache. It is supposed to save complete state of page when user navigates away. When user navigates back with back button page can be loaded from cache very quickly. This is different from normal cache which only caches HTML code.

When page is loaded for bfcache onload event wont be triggered. Instead you can check the persisted property of the onpageshow event. It is set to false on initial page load. When page is loaded from bfcache it is set to true.

Kludgish solution is to force a reload when page is loaded from bfcache.

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

If you are using jQuery then do:

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

Preventing cache on back-button in Safari 5

The empty unload handler will not work anymore. Instead you can check the persisted property of the onpageshow event. It is set to false on initial page load. When page is loaded from bfcache it is set to true.

Kludgish solution is to force a reload when page is loaded from bfcache.

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

If you are using jQuery then do:

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

Mobile Safari back button

This is caused by back-forward cache. It is supposed to save complete state of page when user navigates away. When user navigates back with back button page can be loaded from cache very quickly. This is different from normal cache which only caches HTML code.

When page is loaded for bfcache onload event wont be triggered. Instead you can check the persisted property of the onpageshow event. It is set to false on initial page load. When page is loaded from bfcache it is set to true.

window.onpageshow = function(event) {
    if (event.persisted) {
        alert("From back / forward cache.");
    }
};

For some reason jQuery does not have this property in the event. You can find it from original event though.

$(window).bind("pageshow", function(event) {
    if (event.originalEvent.persisted) {
      alert("From back / forward cache.");
    }
});

Quick solution to these problem is to reload the page when back button is pressed. This however nullifies any positive effect back / forward cache would give.

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

As a sidenote, you can see lot of pages offering using empty onunload handler as solution. This has not worked since iOS5.

$(window).bind("unload", function() { });

Safari back button doesn't reload page when used

Other answers bind things to window.onpageshow, but this is the only version that works for me: once your page is in a final state that you don't want to outlive a redirect, you can just bind the pageshow event and then check for the "persisted" property being true to determine if you should reload it.

window.addEventListener("pageshow", function(evt){
        if(evt.persisted){
        setTimeout(function(){
            window.location.reload();
        },10);
    }
}, false);

Button stays disabled after back in safari due to bfcache

Got it working by adding this PHP code:

<?php
header("Cache-Control: no-cache, no-store, must-revalidate");
header("Pragma: no-cache");
header("Expires: 0");
?>

How to prevent reloading of web page from cache while using mobile safari browser?

When user presses back button, you will receive the same document as you had before (the old page which was suspended). So if you handle onpagehide event and do some modification to the page just before navigating to the new page, your changes are kept there.

I tried adding a script block to the body just before navigating:

if (isSafari) {
        window.addEventListener('pagehide', function(e) {
            var $body = $(document.body);
            $body.children().remove();
                $body.append("<script type='text/javascript'>window.location.reload();<\/script>");
        });
    }

this does not work because the script immediately executes where my intention was to execute it when user returns back to the page.

BUT if you postpone your DOM modifications after leaving pagehide callback, (something like this):

if (isSafari) {
        window.addEventListener('pagehide', function(e) {
            var $body = $(document.body);
            $body.children().remove();

            // wait for this callback to finish executing and then...
            setTimeout(function() {
                $body.append("<script type='text/javascript'>window.location.reload();<\/script>");
            });
        });
    }

TADA it works! as soon as user presses back button on the next page, Safari loads the suspended page and executes this new block of script which has not executed before.

---

Related Topics