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 ing 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?!

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 ing 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?!

• javascript
• html
• browser
• browser-cache

• 1 When sending the page from the server you can set the Cache-Control headers, check out this answer 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 Commented Mar 16, 2017 at 10:25

3 Answers 3

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.

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'); 

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

var url = "http://yoursite./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./a/2068407/3958365