«
»

Include Javascript file inside another

April 9, 2010, 10:28 PM

This can be really handy sometimes, in Javascript there’s no way of including or importing other JS files.

For example in my case I want it to include the JQuery file from the CDN of Google, but I didn’t want to use another typical call to an external file.

What I did is inside of the common JS library of my project add this:

var head= document.getElementsByTagName('head')[0];
var script= document.createElement('script');
script.type= 'text/javascript';
script.src= 'http://code.jquery.com/jquery-1.4.2.min.js';
head.appendChild(script);

With tihs simple trick we added the script to the HTML header.

Of course you can use a function if you are going to use it a lot:

function includeJs(jsFile) {
var head= document.getElementsByTagName('head')[0];
var script= document.createElement('script');
script.type= 'text/javascript';
script.src= jsFile;
head.appendChild(script);
}
 
includeJs('http://code.jquery.com/jquery-1.4.2.min.js');

This is based in the new way google is going to use for analytics:

 var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXXX-X']);
  _gaq.push(['_trackPageview']);
 
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

As you can see they also use the attribute async.

Related Posts Related Websites
Help sharing and Flatter me ;)

Share
Category: JavaScript  |  Comment (RSS)  |  Trackback

Leave a Reply

Follow me