How to load JS scripts that will add only one additional script

Question

I have 2 script files that you put in the <head>

However, they share the same Util script file. I want that in case they are both loaded on the same page, the util file will load only once.

If only one of them is loaded, the util will still be loaded once... I cant use <script src=...utils.js>... only the 2 scripts I am using

var s = document.createElement("script");
s.src = s3 + "/js_enc/utils.js";
s.type = "text/javascript";
document.getElementsByTagName("head")[0].appendChild(s);

What is the best way to achieve this?

thanks

Ben · Accepted Answer · 2010-12-27 07:23:19Z

2

This doesn't seem like a problem, since the Util script will only be loaded when it is declared:

<script type='text/javascript' src='util.js'></script>
<script type='text/javascript' src='script1.js'></script>
<script type='text/javascript' src='script2.js'></script>

But if you want to check that the script has been loaded, you could set a global variable in the Util script, something like

var utilFound = true;

Then check in each script to see if it is set or not.

if(!utilFound) { alert("Util not loaded!"); }

You could also toggle the variable depending on some condition, for example:

if(utilFound) { 
  alert("Util hasn't been accessed yet."); 
  utilFound = false;
}
else {
  alert("Util has already been accessed.");
}

UPDATE

As per your edit, the "check if set and toggle" solution would work fine. If the variable has been set, don't run your document.createElement code.

In your util.js file, add

var utilLoaded = false;

Then in each script, add your snippet, plus a utilLoaded check/toggle:

if(!utilLoaded) {
  var s = document.createElement("script");
  ....
  utilLoaded = true;
}

edited Dec 27, 2010 at 7:23

answered Dec 27, 2010 at 7:07

Ben

57.6k50 gold badges187 silver badges229 bronze badges

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

7 Comments

Ben Over a year ago

I'll need a lot more information to understand how your code is set up.

Himberjack Over a year ago

Not quite good solution. If the util.js hasn't been downloaded, technically, it can be downloaded again by the other script.

Ben Over a year ago

The download will happen only if the utilLoaded switch is not set, or is false. Since this is immediately set to true at the time the external script element is created, it couldn't possibly be loaded again by the same page. A side note - this solution will work until the page is refreshed. For a persistent solution, you'll need a server-side variable (not in Javascript).

Himberjack Over a year ago

It is set only after utils.js was downloaded! it can take a few seconds, in which the other script can be loaded and read that var, which is not yet defined!

Ben Over a year ago

Well, then put it before the appendChild call, and it will be set before the util.js is appended.

|

Collectives™ on Stack Overflow

How to load JS scripts that will add only one additional script

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related