CODEWITHSUNDEEP
javascriptjquery
new_perl
new_perl

Reputation: 7745

How do I simulate ctrl-F5 with jQuery?

So the refresh should discard the cache, how to do it with jQuery?

Upvotes: 6

Views: 34471

Answers (4)

gilly3
gilly3

Reputation: 91617

2024 Update: A comment rightly points out that my original answer from 12 and a half years ago no longer applies, except for in FireFox. This got me thinking about why one would ever want to programmatically trigger a Ctrl+F5. The answer, of course, is that a linked script has updated, but the browser is serving an out-of-date cached version of the script.

You can avoid most of the need for reloading the page with proper use of cache-busting. A browser's cache uses the resource's URL as the cache key. So, when a linked script file changes, you can tweak the URL you request in your <script> tag's src attribute so that you request a brand-new URL, and the browser won't find the new URL in its cache and it's forced to fetch the file fresh from the server. The easy way to do this is to append a version string to the URL's querystring, and change that string whenever the resource changes.

Eg, instead of requesting style.css, script.js, and image.png:

<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<img src="image.png" />

You would append the version string and request style.css?v1.0.0, script.js?v1.0.0, and image.png?v1.0.0:

<link rel="stylesheet" href="style.css?v1.0.0" />
<script src="script.js?v1.0.0"></script>
<img src="image.png?v1.0.0" />

If you are serving your HTML dynamically from the server, your server-side code can inject that value. If you are serving static HTML files, you'll want to write a script that will update your HTML files whenever the code changes in a linked resource.

The above is fine to update cached scripts. But, the one time you might still need to programmatically reload a page is if the server has updated shortly after the page was loaded, and your page fetches data from the server. In that case, your server-side code might be expecting the client to have the latest client-side code running. So, you'll need to reload the page to update the client code.

In order to detect that the server has changed, update your server code to include a version string in its API responses. Then, when you get a response from the server, you can compare the API version with the loaded version, and reload the page when you detect the server has updated.

First, find the <script> tag and read its src property, to find the client script's version:

const scripts = document.querySelectorAll("script[src*='?v']");
// the currently executing script should be the last script in the document so far
const currentScript = scripts[scripts.length - 1];
const scriptURL = new URL(currentScript.src);
const scriptVersion = scriptURL.search.slice(1); // slice off the leading '?'

Then, in your code that calls your API, check the version from the API response and compare it to the script version. Reload the page if the versions differ:

async function getData(args) {
    const res = await fetch("/api/data?" + new URLSearchParams(args));
    const data = await res.json();
    if (data.apiVersion !== scriptVersion) {
        location.reload(true);
    }
    return data;
}

Passing true to location.reload() only does something in FireFox; other browsers ignore it. But, with cache-busting URLs in place on all linked resources, it should be good enough. That is, the top level page should be fetched from the server, and it will have cache-busting URLs on all of its linked resources, so it should work the same as Ctrl+F5. But, just in case I'm wrong and you find that location.reload() isn't enough to reload the top-level page from the server, just use the same cache-busting principles as before to really force the page to reload:

location.replace("?" + apiVersion);

Or, if your URL already has a querystring:

location.replace(location.search + "&" + apiVersion);

Upvotes: 28

pixelbyaj
pixelbyaj

Reputation: 1178

You can detect ctrl+F5 using following code

$(document).keydown(function(e) {
    if (e.keyCode == 116 && e.ctrlKey) {
        alert('ctrl + F5');//HEHEEE
    }
});

Upvotes: -4

GONeale
GONeale

Reputation: 26484

This won't be possible.

Just increment the version number to your javascript reference like this every time you wish to force a fresh download:

<script language="javascript" src="scripts/script.js?ver=2"></script>

Just to clarify, the appended ver parameter has no intrinsic value on the script src attribute as Slomojo pointed out. It was merely a way to address the problem of a forced file reload and also keep a neat versioning system.

Upvotes: 4

Greg Hewgill
Greg Hewgill

Reputation: 994321

The ability to modify the browser cache is outside the scope of what jQuery can do.

Upvotes: 7

Related Questions