4

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?

Guido Visser
  • 1,895
  • 5
  • 23
  • 36

4 Answers4

3

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)

Guido Visser
  • 1,895
  • 5
  • 23
  • 36
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.

Mario A
  • 3,128
  • 1
  • 12
  • 19
  • 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 Jan 19 '15 at 12:51
  • Can't do that unfortunately... :( – Guido Visser Jan 19 '15 at 13:38
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.

A.L
  • 9,074
  • 9
  • 55
  • 87
Malcolm
  • 96
  • 4
  • 2
    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. – A.L Jan 19 '15 at 09:38
  • Your suggestion does make sense. Thank you. – Malcolm Aug 15 '16 at 01:38
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?

Community
  • 1
  • 1
sashwat
  • 597
  • 3
  • 8
  • Wow, I didn't know that you could do this! Is there a proper way to test this in IE10? – Guido Visser Jan 19 '15 at 09:41
  • Use Developer tools of IE. In the network tab see the HTTP code, 200 means that it has been loaded again. – sashwat Jan 19 '15 at 10:15
  • 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 – Guido Visser Jan 19 '15 at 10:23