CODEWITHSUNDEEP
javascriptgoogle-chromesafariwebkitbrowser-cache
graney
graney

Reputation: 1385

Force a reload of page in Chrome using Javascript [no cache]

I need to reload a page using JavaScript and ensure that it does not pull from the browser cache but instead reloads the page from the server. [As elements of the page will have changed in the interim]

On IE and FF I found that the following code worked fine;

window.location.reload(true);

However it does not work on Chrome or Safari.

I tried the following, but also to no avail;

window.location.replace(location.href);
document.location.reload(true);
document.location.replace(location.href);

Is there a solution to this issue?

Findings

After looking into this I have found that this issue is HTTP Protocol handling;

  1. Chrome sends a request with Pragma: no-cache HTTP field
  2. Server responds with Last-Modified: DATE1 field
  3. JS uses location.reload(true) to force a reload from server not cache
  4. Chrome sends a request with If-Modified-Since: DATE1 field
  5. Server responds with HTTP Status 304 Not Modified

The server application is at fault for not noticing the state change in the dynamic page content, and thus not returning a 200. However, Chrome/WebKit is the only browser that sends a If-Modified-Since field when the JS location.reload(true) is called.

I thought I would put my findings here in-case someone else comes across the same issue.

Upvotes: 27

Views: 39212

Answers (5)

Juergen Riemer
Juergen Riemer

Reputation: 1473

This is what I do to ensure my application file is force reloaded on chrome:

    var oAjax = new XMLHttpRequest;
    oAjax.open( 'get', '/path/to/my/app.js' );
    oAjax.setRequestHeader( 'Pragma', 'no-cache' );
    oAjax.send();
    oAjax.onreadystatechange = function() {
        if( oAjax.readyState === 4 ) {
            self.location.reload();
        }
    }

Upvotes: 2

Suhan
Suhan

Reputation: 1434

You can use this hack:

 $.ajax({
        url: window.location.href,
        headers: {
            "Pragma": "no-cache",
            "Expires": -1,
            "Cache-Control": "no-cache"
        }
    }).done(function () {
        window.location.reload(true);
    });

Upvotes: 21

Roy Ling
Roy Ling

Reputation: 1632

Great findings! I just encountered the same issue and this really helps a lot! However, in addition to your finding, it seems that Chrome always sends a GET request for location.reload()...IE/FF is repeating the last request instead.

Upvotes: 1

m03geek
m03geek

Reputation: 2538

To ensure the page isn't loaded from cache you can add some unique number to query:

window.location = location.href + '?upd=' + 123456;

You also can use date instead of 123456

Upvotes: 10

TW147
TW147

Reputation: 551

Try window.location = window.location

Upvotes: 1

Related Questions