How to Append Timestamp to the JavaScript File in <Script> Tag Url to Avoid Caching

How to append timestamp to the javascript file in script tag url to avoid caching

Method 1

Lots of extensions can be added this way including Asynchronous inclusion and script deferring. Lots of ad networks and hi traffic sites use this approach.

<script type="text/javascript">
(function(){ 
     var randomh=Math.random();
     var e = document.getElementsByTagName("script")[0];
     var d = document.createElement("script");
     d.src = "//site.com/js.js?x="+randomh+"";
     d.type = "text/javascript"; 
     d.async = true;
     d.defer = true;
     e.parentNode.insertBefore(d,e);
 })();
</script>

Method 2 (AJZane's comment)

Small and robust inclusion. You can see exactly where JavaScript is fired and it is less customisable (to the point) than Method 1.

    <script>document.write("<script type='text/javascript' src='//site.com
    /js.js?v=" + Date.now() + "'><\/script>");</script>

Append timestamp on src or href attribute with JavaScript

While creating an element, setting the attributes and appending it to the document kind of worked, the beforeSend headers weren't set on the AJAX calls in the javascript.js for some reason. This was also the issue by using $.getScripts('js/javascript.js');

I suddenly realised that I could try a simple document.write() within a script tag. Turns out that it works like a charm.

My fix:

    <script type="text/javascript">
        var _c = new Date().getTime();
        document.write('<script type="text/javascript" src="js/javascrtipt.js?c='+_c+'"><\/script>');
    </script>
</body>

(I can't believe I couldn't come up with this solution earlier)

Append timestamp in gifs using js to prevent caching

As you described that if you have id or class you can modify source using javascript like this

HTML

<img src="../abc.gif" alt="dummy title" id="img1" />

Javascript

function editSrc() {
  // get current src of image
  var img1 = document.getElementById('img1');
  var prevSrc = img1.src;
  alert(prevSrc);
  // get current date
  var dt = new Date();
  // modify img with current timestamp
  img1.src = prevSrc + "?" + dt.getTime();
  alert(img1.src);
}

if you want to update it all the time then better to use

// split src based on `?` and then take the src before `?`
img1.src = prevSrc.split('?')[0] + "?" + dt.getTime();

instead of

img1.src = prevSrc + "?" + dt.getTime();

Demo

How to prevent caching of my Javascript file?

Add a random query string to the src

You could either do this manually by incrementing the querystring each time you make a change:

<script src="test.js?version=1"></script>

Or if you are using a server side language, you could automatically generate this:

ASP.NET:

<script src="test.js?rndstr=<%= getRandomStr() %>"></script>

More info on cache-busting can be found here:

https://www.curtiscode.dev/post/front-end-dev/what-is-cache-busting

What is this number appended to a script url like a parameter?

You can do that to prevent the browser from loading a cached version of the file.

To the browser, that looks like a different file than the last time it was loaded. Every time the page loads, the number should be different, so the browser will request it from the server again instead of loading it from the cache.

The number doesn't have to be different each time. You can change it when you update the file so clients can load the cached version until you update it, after which, because it has a different number, they'll request the new version and cache that.

Related: How to append timestamp to the java script file in tag url to avoid caching shows you how to do it dynamically to your scripts.

Add timestamp to src in iframe using javascript (prevent cache)

yes you can do that,

var linksList = document.getElementsByTagName('a');

for( var i=0,len=linksList.length;i<len;i++ )
    linksList [i].href += '#'+new Date();

this script should be placed before the closing of the body tag, or it should be generally be called after the DOM has loaded.

Now, isn't there a backend way (with headers) to ask the browser not to cache some specific pages?

---

Related Topics