How can I force window.location to make an HTTP request instead of using the cache?

Question

In my web application I am setting window.location to navigate to a different page, but for some reason Firefox shows an old version of that page.

Using Firebug I detected that the browser doesn't even send an HTTP request, it simply uses an older version of that page (not even the last one) and displays it.

The page itself has all the usual headers to prevent caching which works perfectly when I browse my pages using links or manual input. The problem only occurs when seting window.location .

Is this a Firefox problem or something to expect from any browser? Can this behaviour be changed?

Answer 1

You could just add a random parameter to the page URL in order to have the browser issue a new request.

So instead of using

 window.location = "my.url/index.html";

use

 window.location = "my.url/index.html?nocache=" + (new Date()).getTime();

Answer 2

您可以使用带有真实参数的location.reload，它将始终绕过缓存。

window.location.reload(true);

Answer 3

Add some time specific or random querystring value to the url. This will force the page to be reloaded.

var yourNewLoc = "http://newlocation.com/";
document.location = yourNewLoc + "?c=" + (new Date()).valueOf();

Answer 4

You have to validate if there is any existing query parameter in the url. If any query parameter exist, you should append the timestamp using "&". I have written a quick snippet that might be of your help.

window.newLocation = function( location ) {
    var newLocation = ( typeof location === "string" ) ? location : window.location.href,
       appendType = ( newLocation.indexOf("?") < 0 ) ? "?" : "&";
    window.location = newLocation + appendType + "_t=" + (new Date()).getTime();
}

Usage:

newLocation("index.html") or window.newLocation("index.html") 
// opens "index.html?_t=<timstamp>"

newLocation("index.html?existingQuery=true") or window.newLocation("index.html?existingQuery=true") 
// opens "index.html?existingQuery=true&_t=<timstamp

newLocation() or window.newLocation() 
// opens existing window location with a timestamp

You could further modify the snippet to remove exiting timestamp in the query parameter to avoid duplication

Answer 5

just need to tell your download function (in the controller, in case of Laravel) do not cache it by setting the headers, used the following code for Laravel:

$headers =[
            'Content-Type' => 'application/text',
            'Cache-Control' => 'no-store, no-cache, must-revalidate, max-age=0',
            'Cache-Control' => 'post-check=0, pre-check=0, false',
             'Pragma' => 'no-cache',  ];
return response()->file($pathToFile, $headers);

This code is very much true for PhP as well just need transferring the code accordingly. By adding new dates may invalidate a link especially if you are using a temporarySignedLink etc.

Cheers