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:
From within this master.js file I can ‘include’ any js files I want.
master.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
hola there! .-)
Looks interesting. Did you check crossbrowser compatibility?
Cheers, Kai
Kai
December 7th, 2006
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
Michael Sharman
December 8th, 2006
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!
Ben Nadel
December 8th, 2006
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
Kris John
December 8th, 2006
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
Michael Sharman
December 9th, 2006
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.
matt snider
December 11th, 2006
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?
Ricardo Afonso
December 14th, 2006
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
Steve
January 16th, 2007
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
Michael Sharman
January 16th, 2007
not work on ie 6 ????
wizzzy
February 3rd, 2008
Does not work if your page is a frameset ( doing lots of fancy redirection calculations ) and has no head element!
Garry Lindsay
March 21st, 2008
@Garry - Hmm that would be quite a rare scenario I would imagine.
Still, good to know. Thanks for the comment.
Michael Sharman
March 21st, 2008
very nice tip ! was just looking for a solution for this problem .
Tom
March 28th, 2008
Great!, it helped me out… i was looking for something like this… Thanks.. keep it up
Alyas
April 3rd, 2008
Nice tip, very interesting…
Happy
June 6th, 2008
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.
James wiseman
June 6th, 2008
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.
Juwe
June 25th, 2008
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
Juwe
June 25th, 2008
Hi Juwe,
Glad it worked out for you! Hello from sunny Australia
Michael Sharman
June 25th, 2008
yeah thanks, i added your blog to my feed reader. Greetings from Mexico City.
Cheers.
Juwe
June 26th, 2008