Is it possible to use a variable for a javascript reference

Question

Instead of:

<script src="/scripts/myJsFile.v1.js" type="text/javascript></script>

Have something like

<script src="/scripts/myJsFile." + versionVar + ".js" type="text/javascript></script>

This way when we update the js version files the user won't have to clear their cache.

If you are thinking about `versionVar` as JavaScript variable, then no, you cannot do it *that* way. You could, however, insert a script tag dynamically. — Felix Kling, Sep 21 '11 at 17:38
You cannot include a variable in plain HTML to define a JS source dynamically — rabudde, Sep 21 '11 at 17:38
We aren't using PHP. My guess would be to load the files from inside a script tag — Darcy, Sep 21 '11 at 17:38
Also see http://stackoverflow.com/questions/435785/dynamically-changing-stylesheet-path-not-working-in-ie-and-firefox — rlb.usa, Sep 21 '11 at 17:40
The script tag is part of the HTML - it's not executable JS code. — Marc B, Sep 21 '11 at 17:41
Is this static HTML, Classic ASP, ASP.Net, ASP-MVC, PHP...etc? — John Hartsock, Sep 21 '11 at 17:45

pimvdb · Accepted Answer · 2011-09-22T14:52:26.597

Not in that way, because you're mixing HTML and JavaScript together. HTML does not have JavaScript variables available.

What you can do, however, is adding the <script> tag dynamically, i.e. through JavaScript. That way, you obviously are able to use variables:

<script>
var versionVar = "1.0";

window.addEventListener('load', function() { // on load

    var scriptTag = document.createElement('script'); // create tag
    scriptTag.src = "/scripts/myJsFile." + versionVar + ".js" // set src attribute
    scriptTag.type = "text/javascript"; //set type attribute
    document.getElementsByTagName('head')[0].appendChild(scriptTag); // append to <head>

}, false);
</script>

Mohsen · Answer 2 · 2011-09-21T17:51:53.480

You can't do this in your HTML file directly. But still you can do this inside an script tag if versopnVar is a JavaScript variable in your window context:

<script type="text/javascript">
var script = document.createElement('script');
script.setAttribute('src', '/scripts/myJsFile.' + versionVar + '.js');
script.setAttribute('type', 'text/javascript');
document.body.appendChild(script);
</script>

At the end, it's not a good aproach doing this. Please read this article at a list apart to get informed.

Alternative Style: Working With Alternate Style Sheets

score 2 · Answer 3 · answered Sep 21 '11 at 17:42

Check out how Google loads their Analytics. Then maybe try something similar like:

(function() {
    var versionVar = 9;

    var ga = document.createElement('script'); 
ga.type = 'text/javascript';
ga.src =  'http://www' + '.google-analytics.com/ga' + versionVar + '.js';

    var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
})();

score 1 · Answer 4 · answered Sep 21 '11 at 17:39

It would probably be better to do something like

<script src="/scripts/myJsFile.js?v1" type="text/javascript></script>

Then, when you make and update:

<script src="/scripts/myJsFile.js?v2" type="text/javascript></script>

Which will cause most browsers to pull the file rather than pull from cache. This means that you won't have separate JS files. But will just be forcing the user to pull the most recent.

Also, if you want it to always pull the file you can, in a similar manner, append a random int.

score 1 · Answer 5 · answered Sep 21 '11 at 17:39

1

You cannot do that straight out.

One way is with some server side code.
For example in php:

<?php $version = "1.0"; ?>

<script src="/scripts/myJsFile.<?php echo $version ?>.js" type="text/javascript></script>

answered Sep 21 '11 at 17:39

Naftali

144,921
39
244
303

1

Thanks but we aren't using PHP – Darcy Sep 21 '11 at 17:43

score 1 · Answer 6 · edited Sep 21 '11 at 17:49

1

Not exactly that way, but you can create a new script node with e.g. document.createElement and add it to the page.

var s = document.createElement("script");
s.src = ...
document.body.appendChild(s);

You can also use the document.write call to do the same...

edited Sep 21 '11 at 17:49

Caspar Kleijne

21,552
13
72
102

answered Sep 21 '11 at 17:44

6502

112,025
15
165
265

score 0 · Answer 7 · answered Sep 21 '11 at 17:40

You'd have to update your page to update the variable. Also, you'd have to update your javascript file name every time you changed it.

You can use a query string to make your JS unique.

<script src="/scripts/myJsFile.js?version=2" type="text/javascript></script>

marshall & I had the same Idea.

Also, you'd have to update your HTML file every time you updated your Javascript file.

Is it possible to use a variable for a javascript reference

7 Answers7