How to force the browser to reload a cached URL without changing the URL

Question

An accident happened and a certain HTML page was set to be cached by browsers. We do not want to change the URL of that page because other parties rely on that URL (including SEO).

Is there a way to make as many clients as possible reload that page? Clients are often coming to that page when browsing around on the site so we are often able to send them some fresh JavaScript (or any other resource) before they hit the problematic page. Maybe there is a JavaScript trick to force a reload?!

When sending the page from the server you can set the `Cache-Control` headers, check out [this answer](http://stackoverflow.com/questions/49547/how-to-control-web-page-caching-across-all-browsers) for a list on how to do this. I don't know how you'll force people to delete their cache if it's already been cached though — George, Mar 16 '17 at 10:25

score 4 · Accepted Answer · edited Oct 07 '21 at 08:58

4

Code snippet below will invalidate cache entry of the page with URI equal to uriOfCachedPage:

var xhr = new XMLHttpRequest();
xhr.open("GET", uriOfCachedPage, true);
xhr.setRequestHeader("Cache-Control", "max-age=0");
xhr.send();

You need to inject this code to script or HTML page that your users will probably get.

For more information check XMLHttpRequest page on MDN and Request Cache-Control Directives section in RFC 7232 Hypertext Transfer Protocol (HTTP/1.1): Caching.

You also can store cachedPageReloaded flag in cookies or localStorage and invalidate cache entry only if it wasn't invalidated before. Check Document.cookie and Window.localStorage pages on MDN.

edited Oct 07 '21 at 08:58

Community

1
1

answered Mar 16 '17 at 12:59

Leonid Vasilev

11,910
4
36
50

This is a great solution. Do you know if there is a way to get the browser to also send the etag value for its cached content? Basically I'm trying to cache the page by default, and update the cache in the background, but using etag also would cut down on that background bandwidth – Fabio Beltramini Apr 04 '19 at 06:44

score 0 · Answer 2 · answered May 09 '18 at 23:03

Reload Page With TimeStamp Parameter Added to URL to Prevent Cached Versions From Being Loaded

Below is a function I use to reload an html page every time it is visited which appends a timestamp as a "version" parameter to the URL ensuring that it is never a cached copy of the page being retrieved.

// reloads page with a time-stamp appended to URL 
// to ensure current form version loads
( function() {
    var x = new Date().valueOf();
    var now = x.toString().slice(-10);
    var later = (x + 30000).toString().slice(-10);
    var uSplit = window.location.href.toString().split('?');

    if(uSplit.length > 1){
        var oldNum = uSplit[1].slice(2);
        var oldDate = parseInt(x.toString().replace(now, oldNum));
        var diff = oldNum - now;
    } else { 
        var diff = 0; 
    }

    if(diff <= 0){ 
        var newURL = uSplit[0] + "?v=" + later; 
        window.location.replace(newURL);
    } else { 
        return false; 
    }
    return false;
}());

This method adds a parameter to the URL, but it doesn't "change" it. It is the same method often used to carry over data from a form by adding the form data parameters to the end of the url.

Prevent Cached External .js Files

To ensure you are serving up-to-date javascript, that is included via script tags, from external .js files, you can use the jQuery getScript() function, which you can read about HERE. It adds a timestamp parameter to the end of the resource URL (not the actual page's URL), so that your external .js files being loaded are always current.

Example Usages:

$.getScript('url_to_your_javascript_file.js');

score -1 · Answer 3 · edited May 23 '17 at 12:00

You can add timestamp as querystring at the end of your url:

var url = "http://yoursite.com/your.html?r=" + (new Date()).getTime();

You can invoke AJAX request with no cache option to not change the url and not refreshing the page either:

$.ajax({
        url: "your.html",
        cache: false, //<== don't cache!
        type: "GET",
        dataType: "json",
        success: function(data, textStatus) {
                         $("#body").html(data);
                 }
    });

Looking for a JavaScript solution?

window.location.reload(true);

Full HTML solution

<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />

Furher reading for adding these headers from server-side: https://stackoverflow.com/a/2068407/3958365

That would be changing the URL of the page which we cannot do. — boot4life, Mar 16 '17 at 14:26
Not sure what happened here. Have I really not seen the others?! I'm pretty sure they were not there when I commented. Anyway, only the AJAX one would work because with caching in effect I would not be able to deliver JS or meta tags to that page. I did not downvote, btw. — boot4life, Oct 18 '17 at 08:13

How to force the browser to reload a cached URL without changing the URL

3 Answers3

Reload Page With TimeStamp Parameter Added to URL to Prevent Cached Versions From Being Loaded

Prevent Cached External .js Files

Linked