I’m working on an application which stores a lot of data in the application scope. Part of the data stored is a config CFC that has a method which loads ‘external assets’ (javascript and css files etc) into the <head> of the html document via <cfhtmlhead>. I love that tag 
My part in this application development is limited to a particular section only, but there was already a lot of external assets present in the header and things were getting very messy. I was looking for a way to simulate <cfinclude> but from within a .js file so I could clean up my output a bit, fortunately there is a way!
I now have a master js file to add to the <head> section of my document:
<script src="js/master.js" type="text/javascript"></script>
From within this master.js file I can ‘include’ any js files I want.
master.js
//this function includes all necessary js files for the application
function include(file)
{
var script = document.createElement('script');
script.src = file;
script.type = 'text/javascript';
script.defer = true;
document.getElementsByTagName('head').item(0).appendChild(script);
}
/* include any js files here */
include('js/myFile1.js');
include('js/myFile2.js');
The above code includes myFile1.js and myFile2.js, both of which are located in the relative ‘js/’ directory.
Not only does this clean up my output, but as my config file was stored in application scope every time I wanted to add/remove an asset from my application I need to refresh the scope…annoying. But now I am happy
36 Comments
hola there! .-)
Looks interesting. Did you check crossbrowser compatibility?
Cheers, Kai
Hi Kai,
I’ve tested with success on:
WinXP
– Firefox 2.0
– IE 6
– IE 7
– Netscape 8.1.2
– Opera 9.0
– Seamonkey 1.0.5
Mac Tiger 10.4.6
– Firefox 2.0
– Safari 2.0.3
That is a pretty nifty technique! I hear you on the clean output. Do you have any idea if this affects the ability for the browser to cache the included Javascript files? I assume it doesn’t as they are still just script tags, but just thought I would throw that out there.
Excellent tip though!
I use a similar technique and one problem i had -
the function finishes before the javascript is actually loaded into the browser. so before calling any function in the included js file check if is loaded
Cheers kris
Hi Kris,
Interestingly I just ran across this issue when loading the scriptaculous framework. scriptaculous.js by default loads all the effects libraries, but it was throwing a ‘not defined’ error because those other libraries weren’t loaded yet!
Oh well, it’s good to know the limitations of this technique so you know when you can and can’t use it.
Thanks again
I use a similar solution, without the defer attribute, as i want the javascript to be parsed before the page ends. Have you noticed any benefit to defering?
Michael, kris: I too have the problem where file B requires a function in file A, but file B is parsed before file A is completely loaded in memory. In my case obect in file B directly inherit from objects in file A, so i need a work around for this. Do either of you have a good work around for this?
Also, you can always try the document.write() if the dom way fails. This will support a couple more of the older browsers.
Hello! I have some scripts files ” *.js “, but When I drag them to firefox, thei dont run, thei are listed!!!
How can I install this files that I have on disk?
What if I had a javascript file that was imbedded into deeper folders then the includes I wanted to access? So what I’m saying is there a way to include a .js file that is x folders up in the folder hierarchy?
Your example looks like its relative as in in the samve folder as the .js itself
Hi Steve,
Yes you can either use a Web Mapping (virtual directory) or use the ../ style notation.
eg if my directory path was the following:
C:\mps\dev\js\includes\js\master.js
I could use this to reference a file in C:\mps\dev:
include(‘../../../myJavascript.js’);
or I could use a web mapping (myWebMapping points to C:\mps\dev):
include(‘/myWebMapping/myJavascript.js’);
Michael
not work on ie 6 ????
Does not work if your page is a frameset ( doing lots of fancy redirection calculations ) and has no head element!
@Garry – Hmm that would be quite a rare scenario I would imagine.
Still, good to know. Thanks for the comment.
very nice tip ! was just looking for a solution for this problem .
Great!, it helped me out… i was looking for something like this… Thanks.. keep it up
Nice tip, very interesting…
Good solution, although, out of interest, what would happen if you included two js files that themselves required the same (third) common js file included?
As far as I can see, you would have to name the ‘include’ function differently in each js file, and you would end up with the script included twice.
Hi there i found your article looking for exactly this, your script is really nice but i had a problem when i tried to use it; the question is: when are you loading the functions include(‘whatever.js’)
If i enter only the script as you show it, didn’t happens anything, i tried to put them into another function and load it in the onload event of the body and didn’t work again
how do you load them??
Cheers.
ejem, hehe sorry man, my problem wasn’t the loading of the functions, it was the relative location of the js files
i liked your code is a great and simple solution, as we said here in MX: está de guevos
Hi Juwe,
Glad it worked out for you! Hello from sunny Australia
yeah thanks, i added your blog to my feed reader. Greetings from Mexico City.
Cheers.
It’s not working with IE7 (7.0.5730.11)
It’s not working with IE7 (7.0.5730.11)
Interesting info like:
http://www.shauninman.com/archive/2007/04/13/operation_aborted
see info for issue IE7
http://www.shauninman.com/archive/2007/04/13/operation_aborted
Hi! I tried your sample on Firefox 3 and IE 6. It’s not working. Are you sure you tried your code?
@neldeo
>Are you sure you tried your code?
Err..pretty sure I did! But that was 2 years ago, way before FF3. I actually don’t use this technique anymore. I usually compress and combine my js (and css) files instead. Saves on http requests.
Also from memory everything was fine in IE6
Tested again and again, sorry but your method is working PERFECT! It was another issue what created an error.
So, it’s working neat and perfect over a range of IE6 … IE8b and of course all FFx.
Thanks Michael!
Quite a wonderful tip! Thanks a lot!
So, about the caching and server hits issue. If I include one file with the include function, would the browser hit the server file twice? or would the whole thing get cached? Would the included file get pulled down every time the page loads?
Hi Michael Sharman,
Hi Michael Sharman ,
I Tried This Code. I Work Fine. Thnkx.
Why using defer=true?
That’s unnecessary and can lead to several errors if the script is not loaded in time…
Anyway it’s a good script, I use a similar approach, the only difference being that I use a little loop that checks the script has not been already included before adding it.
Great code! you have save my day. thank you
Nice trick. I should have read your site eariler.
Hi!
Finally, I found a solution to this issue! Great work!
I have a question though. Is it possible to like having a “conditional” statement within this code? Example, I only want ’sample.js’ to load ONLY in ’specific web page’? I this question would really be a great addition to this great work.
Hope to hear a reply soon. Thank you!
Just terrific!
Nice post. It is working fine. Thank you