use javascript to write a random <script>

Question

How do I add a random 1 of 4 pre-defined <script>s to a webpage?

i.e. A 3rd party tool has 4 e-book download modal forms that are generated by a unique <script> (1 for each e-book).

I want to randomly add 1 of these <script>s to the page, so that on each page load, a different e-book download modal form is displayed.

How would I do this?

I've tried:

var min=1; 
var max=4;  
var random = Math.random() * (+max - +min) + +min; 

switch ($random) {
   case 1:
       document.write(<script src=""></script>)
   break;

but the </script> in the document.write closes the main <script>. Do I need to use HTML ascii code for the < & >?

Help appreciated.

Update:

The scripts I need added are in the format:

<script type='text/javascript' async='true' src='https://app.ontraport.com/js/ontraport/opt_assets/drivers/opf.js' data-opf-uid='p2c187780f17' data-opf-params='borderColor=#ec0c8d&borderSize=5px&formHeight=572&formWidth=60%&maxTriggers=2&onExitIntent=true&popPosition=mc&timeframe=1&instance=1067093054'></script>

Well, as a better and cleaner solution you can have one same script on each page with random links on Ebooks instead of 4 random scripts — flppv
– flppv, Commented Mar 18, 2019 at 6:10
You can just use '<\/script>' to avoid closing the script tag. But a better solution wouldn't use document.write at all. — melpomene
– melpomene, Commented Mar 18, 2019 at 6:12

trincot · Accepted Answer · 2019-03-29 07:07:41Z

You can just make a random selection of predefined script src URLs, and then dynamically add the script tag for it:

// List of possible attributes that script element could get
var scripts = [
    { src: "http://abc/scr1.js", "data-opf-uid": "23", "data-opf-params": "y='a'" },
    { src: "http://abs/scr2.js", "data-opf-uid": "81", "data-opf-params": "x=9" }
];
// Select a random entry from above list
var selected = scripts[Math.floor(Math.random()*scripts.length)];
selected.type='text/javascript';
// Create the script DOM element
var script = document.createElement('script');
// Assign the selected properties to the element as attributes
for (var prop in selected) {
    script.setAttribute(prop, selected[prop]);
}
// Add the element to the document
document.head.appendChild(script);

Put this as a script in the body part of your document.

If the remote script is designed to be loaded in the body tag, then the last line should be changed to:

document.body.appendChild(script);

The properties you define in the above scripts object do not need any HTML escaping: that is taken care of when those properties are added to the generated script element using setAttribute(). You mention that your script needs the async attribute, but that is irrelevant for scripts that are added via code: they are anyway async. So no need (but also no harm) to add those.

Collectives™ on Stack Overflow

use javascript to write a random <script>

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related