Static javascript tag with dynamically constructed URL

Question

I have a static script declaration as a requirement, is it possible to have its URL dynamically constructed once browser wants to download it?

<script async src='https://my-known-host.com/script.js?param1=<dynamicValue>'
</script>

This parameter is generated on the client and let's say I want it to be just a random number.

I want to generate random on client side because server caches pages and this request should have a unique random number every time paged is loaded (even from cache)
I need to have it statically declared in order to start the download right away (even before browser parsed to the line of declaration)

Is it possible?

to maintain order, you need to add the new tag using document.write(), which has perf issues but works — dandavis
– dandavis, Commented Mar 30, 2017 at 23:36
What would params do on a JavaScript page? You can use <script type='text/javascript' src='yourURL.php?getParam=getValue'></script> and have your PHP page return JavaScript. — StackSlave
– StackSlave, Commented Mar 31, 2017 at 0:14

Josh Beam · Accepted Answer · 2017-03-30 23:32:33Z

1

Yeah, a common approach is to write a script that injects the script tag. Something like this:

<script type="text/javascript">

setTimeout(function(){
  var a = document.createElement("script");
  var b = document.getElementsByTagName("script")[0];

  // this adds some number, for example
  // you can tweak it to be a random number if you want
  a.src = document.location.protocol +
  "my-known-host.com/script.js?param1=" +
  Math.floor(new Date().getTime()/3600000);

  a.async = true;
  a.type = "text/javascript";
  b.parentNode.insertBefore(a,b)
}, 1);

</script>

I actually took this example script from an analytics provider (crazyegg.com), but Google Analytics does a similar approach. In other words, it's a common thing.

answered Mar 30, 2017 at 23:32

Josh Beam

19.9k5 gold badges48 silver badges69 bronze badges

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

2 Comments

Vic Over a year ago

Why setTimeout and why 1 ms delay? I heard the real minimum is 4. Oh, it's an example script.

Josh Beam Over a year ago

@Vic yeah I just pulled it straight from crazyegg

Vic · Accepted Answer · 2017-03-31 00:03:57Z

<head>
    <script>
            $("head").append($("<script>", {async: true, src: "test.js?params=" + Math.random()}));
    </script>
    <script async src="test.js?params=0.524902342"></script> <!-- parse-able result from the script below -->
</head>

Sorry, I provided jQuery, but this or a vanilla approach should get the job done. The trick is to run JavaScript in head that would append <script src="example.js?" + random></script> to head.

After the browser runs that, it would parse your parameterized <script> at the end of the head tag.

I tested it myself and my browser made a request to test.js?params=0.3607864086033945

Hope that solves it!

EDIT:

If you don't want the script to be at the end of head, you can also do this. Very important that you let the browser parse <script id="randScript" async></script> first.

<script id="randScript" async></script>
<script>
    $("#randScript").prop("src", "test.js" + Math.random()); //jQuery
    document.getElementById("randScript").src = "test.js" + Math.random(); //vanilla
</script>

Collectives™ on Stack Overflow

Static javascript tag with dynamically constructed URL

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related