How to include external JS files without including them in the head tag?

Question

I am following this tutorial to create a tabbed view. As we can see, we have included four external JS files in the <head> section.

<script type="text/javascript" src="http://yui.yahooapis.com/2.5.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
    <script type="text/javascript" src="http://yui.yahooapis.com/2.5.0/build/element/element-beta-min.js"></script>
    <script type="text/javascript" src="http://yui.yahooapis.com/2.5.0/build/connection/connection-min.js"></script>
    <script type="text/javascript" src="http://yui.yahooapis.com/2.5.0/build/tabview/tabview-min.js"></script>

Then in the <body>, the only JS code concerned with the tabs is

<script type="text/javascript">
    var myTabs = new YAHOO.widget.TabView("content-explorer");
</script>

QUESTION:-

Due to some reason, I can not put any code in the <head> tag. So is there any way I can include the external JS files in the JS code before var myTabs = new YAHOO.widget.TabView("content-explorer");?

Duplicate question? Somebody has already asked how to include JS in JS: http://www.stackoverflow.com/questions/950087/how-to-include-a-javascript-file-in-another-javascript-file — Xanco, Aug 09 '14 at 20:05
[___This might help___](http://api.jquery.com/jquery.getscript/)..!? — Bhavik, Aug 09 '14 at 20:07
@Bhavik That only works if jQuery is included in the page already (it's not mentioned whether it is). — AstroCB, Aug 09 '14 at 20:08
@Pumbaa80: afaik `document.write` is deprecated these days. I believe it forces browsers to reparse the whole HTML file (or something like that, which takes a long time). It's best to inject a script tag into the DOM these days. — halfer, Aug 10 '14 at 16:09
@halfer No, the opposite of what you're saying is true. This is exactly the situation where you'd want to use it. However, most of the time you want to use alternatives. See http://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice — user123444555621, Aug 10 '14 at 16:29
Righto, thanks @Pumbaa80 - would you explain why? (Either here or as your own answer - it might be useful for the OP to see why that is to be preferred over AstroCB's approach). — halfer, Aug 10 '14 at 16:31
@Pumbaa80: I saw that, it explains why it should not be used. I wonder if you could explain (or add a link) as to when it should, and why it is better in this case? — halfer, Aug 10 '14 at 16:37

score 1 · Answer 1 · answered Aug 09 '14 at 20:18

There are a couple of ways to do it, but the easiest is to create a script element in JavaScript and append it to the document when it runs.

For simplicity, I've done this in a loop here to accommodate the number of scripts to include; resources is an array of strings that contain URLs pointing to the resources' locations:

<script>
    //array of scripts to include
    var resources = ["http://yui.yahooapis.com/2.5.0/build/yahoo-dom-event/yahoo-dom-event.js", "http://yui.yahooapis.com/2.5.0/build/element/element-beta-min.js", "http://yui.yahooapis.com/2.5.0/build/connection/connection-min.js", "http://yui.yahooapis.com/2.5.0/build/tabview/tabview-min.js"];

    for(var i = 0; i < resources.length; i++){
        var script = document.createElement("script");
        script.setAttribute("type", "text/javascript");
        script.setAttribute("src", resources[i]);
        document.getElementsByTagName("head")[0].appendChild(script);
    }

    //stuff to do after scripts have loaded
    var myTabs = new YAHOO.widget.TabView("content-explorer");
</script>

How to include external JS files without including them in the head tag?

1 Answers1