How to dynamically include a javascript file, before the page loads

Question

I want to include a local .js file in my index.html page, based on the outcome of an 'if' statement, as described in my sample code below. I need the .js contents to be included in the initial loading of the page, as the contents will be displayed in the html itself on load.

index.html:

<html>
  <head>
     <script src="script.js"></script>
  </head>
<body>
     <script>
         include_another_script();
     </script>
</body>
</html>

script.js:

include_another_script function(){
    var url;
    if( //some stuff){
        url = "script1.js";
    } else {
        url = "script2.js";
    }

    document.write("<script src=url></script>");
}

VIDesignz · Accepted Answer · 2014-02-11 20:09:03Z

1

Try this instead

<head>
<script type="text/javascript">

var url;
if( blah == blah){
url = 'myUrl.js';
}else{
url = 'myOtherUrl.js';
}

var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = url;
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);

</script>
</head>

edited Feb 11, 2014 at 20:09

answered Feb 11, 2014 at 19:55

VIDesignz

4,8133 gold badges30 silver badges38 bronze badges

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

3 Comments

p1xelarchitect Over a year ago

Ooops, I was sloppy when I wrote the sample code. Yes, I have done that in my working version. Still doesn't solve my problem :(

Kevin B Over a year ago

@p1xelarchitect in that case, can you show a more complete sample? i don't see any reason for it to not work.

VIDesignz Over a year ago

And instead of using a function just write the if/else statement directly above this to get the var url value

Alex W · Accepted Answer · 2014-02-11 20:43:54Z

0

If you need the script to be loaded before the document loads, you'll need to include the conditional script in the head section of the document.

You can do something like this:

<head>
    <script src="script.js"></script>
    <script type="text/javascript">
        function include_another_script(){
            var url;
            if( //some stuff){
                url = "script1.js";
            } else {
                url = "script2.js";
            }
            $('head').append('<script type="text/javascript" src="'+url+'"></script>');
        }
   </script>
</head>

Note that your function declaration is wrong:

include_another_script function() {

edited Feb 11, 2014 at 20:43

answered Feb 11, 2014 at 19:59

Alex W

38.5k13 gold badges114 silver badges115 bronze badges

6 Comments

Kevin B Over a year ago

Why does it need to be in the <head>?

Alex W Over a year ago

@KevinB He said "I need the .js contents to be included in the initial loading of the page, as the contents will be displayed in the html itself on load". Putting them in the head ensures that they will.

VIDesignz Over a year ago

He is putting it in the head since the OP asked to have it load before anything else in the document

Kevin B Over a year ago

that doesn't necessarily mean it needs to be in the head. It all depends on what the code does. If the code he's including does a document.write, he'll want to include it using document.write, where he intends for it to output.

VIDesignz Over a year ago

@KevinB Ok man, you win...we'll just delete our answer and you can provide him the solution.

|

ojovirtual · Accepted Answer · 2014-02-11 21:16:08Z

0

Try this, src is the path to the script you want to load.
var script = document.createElement('script'); script.src = src; document.head.appendChild(script);

answered Feb 11, 2014 at 21:16

ojovirtual

3,36218 silver badges21 bronze badges

Collectives™ on Stack Overflow

How to dynamically include a javascript file, before the page loads

3 Answers 3

3 Comments

6 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

6 Comments

Comments

Related