Append timestamp on src or href attribute with JavaScript

Question

For 2 days I've been looking an answer, but I can't find a good solution to my problem.

I'm developing a web application where I can only use standard front-end files (HTML, CSS, JavaScript (I use jQuery)). There's no back-end script merged with the HTML.

What I'm trying to achieve is to add an <script> tag to my HTML, but with a timestamp added as a variable, such as: <script type="text/javascript" src="js/javascript.js?c=1421656264439"></script>.

With PHP it would be simple to achieve, because you can just add the timestamp along with the HTML. But since I must work with front-end code only, what would be the best way to add a script or link tag with a timestamp, so the script doesn't get loaded from the cache?

Since the client uses Internet Explorer 10, I will need an answer that will work with that...

Could anyone help me out?

like var script = document.createElement('script'); script.setAttribute('src', 'js/javascript.js?c=' + (new Date()).getTime()); document.head.appendChild(script); — Arun P Johny
– Arun P Johny, Commented Jan 19, 2015 at 8:45

Guido Visser · Accepted Answer · 2015-01-20 09:25:23Z

6

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)

edited Jan 20, 2015 at 9:25

answered Jan 20, 2015 at 9:06

Guido Visser

2,3095 gold badges29 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mario A · Accepted Answer · 2015-01-19 09:09:16Z

1

Since you are working with jQuery I recommend you to do it this way:

$.getScript( "js/javascript.js" );

From jQuery docs:

By default, $.getScript() sets the cache setting to false. This appends a timestamped query parameter to the request URL to ensure that the browser downloads the script each time it is requested.

answered Jan 19, 2015 at 9:09

Mario A

3,3711 gold badge20 silver badges25 bronze badges

2 Comments

Guido Visser Over a year ago

This works, kind of... It does load in with a timestamp! But it appears that all my AJAX calls within the javascript.js file are not behaving like they should. Non of them send a Reuqest header, which I set in the scripts, causing my AJAX functions to fail.

Guido Visser Over a year ago

Can't do that unfortunately... :(

Community · Accepted Answer · 2017-05-23 12:30:21Z

1

Dynamically load the javascript/css. Also while loading add the random version.

e.g. http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml

Anyway, I believe you already know what you are doing is not the best practice. In case of more specific requirement HTTP header can be set to no-cache for the JS/css files. This information can be set in the HTTP server being used without need of a programming language.

How to control web page caching, across all browsers?

edited May 23, 2017 at 12:30

CommunityBot

11 silver badge

answered Jan 19, 2015 at 9:11

sashwat

6474 silver badges11 bronze badges

3 Comments

Guido Visser Over a year ago

Wow, I didn't know that you could do this! Is there a proper way to test this in IE10?

sashwat Over a year ago

Use Developer tools of IE. In the network tab see the HTTP code, 200 means that it has been loaded again.

Guido Visser Over a year ago

That's obvious, but if I check in Chrome, I see a request header called "No-Caching" (so I can assume it's working), but it's not in the request header of IE10

A.L · Accepted Answer · 2016-08-23 10:12:35Z

1

Please take a look at jQuery getScript().

I think it could solve your problem:

By default, $.getScript() sets the cache setting to false. This appends a timestamped query parameter to the request URL to ensure that the browser downloads the script each time it is requested.

edited Aug 23, 2016 at 10:12

A.L

10.7k10 gold badges73 silver badges106 bronze badges

answered Jan 19, 2015 at 9:10

Malcolm

1261 silver badge4 bronze badges

2 Comments

A.L Over a year ago

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes.

Malcolm Over a year ago

Your suggestion does make sense. Thank you.

Collectives™ on Stack Overflow

Append timestamp on src or href attribute with JavaScript

4 Answers 4

Comments

2 Comments

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related