Serving Dynamic JavaScript With ColdFusion
Posted By : todd sharp Posted At : February 17, 2009 9:42 AM Posted In: JavaScript, ColdFusion
8
I know the title doesn't sound terribly exciting, but bear with me, the topic is actually pretty cool. A friend asked me this morning if there was a way to 'import' a JavaScript file (in this case it was jQuery) from another JavaScript file.
It is an interesting question for sure. Your first thought is probably the <script> tag, but the <script> tag is an HTML tag. If you're serving a pure JS file you can't just slap a <script> tag in and go on your merry way.
I know jQuery itself has dynamic script loading methods, so I'm sure it can be done via script, but I was curious as to his implementation since I thought CF could provide what I believe to be a more elegant solution. He told me that he is hosting a JS file that users can point to to include his content on their page. Think of Google Ads for example - you put their script on your page and the magic 'just happens'. In his case he wanted to include jQuery in his script, but couldn't think of a way to get it done.
The answer is pretty simple, and in my previous testing it works flawlessly. Just have folks point to a ColdFusion file that serves up the JavaScript. Here is a quick example.
one.js:
return 'hi, i\'m file one';
}
two.js:
return 'hi, i\'m file two';
}
jsInclude.cfm:
<cfinclude template="one.js" />
<cfinclude template="two.js" />
Note: the key to jsInclude.cfm is to include the necessary JavaScript files via cfinclude, not via a script tag. Remember that cfcontent is going to serve this content as text/javascript - so a <script> tag won't work - it's HTML.
index.cfm:
<head>
<script src="jsInclude.cfm" type="text/javascript"></script>
<script>
getStuff = function(){
var o = document.getElementById('output');
o.innerHTML += one();
o.innerHTML += '<br />';
o.innerHTML += two();
}
</script>
</head>
<body>
<input type="button" id="getStuffFromJS" onclick="javascript:getStuff();" value="get stuff" /><br />
<div id="output"></div>
</body>
</html>
And that's it. I've combined external, raw JS files into a single CFM proxy and included that in my page via a <script> tag. Here is a quick demo.
jQuery.getScript( url, [callback] );
Not entirely sure, but from the looks of things this will fit your use case, and is a bit simpler!
It's just as easy to write the script to the DOM to include jQuery, but I think this method gives you a little more control and lets you be dynamic. For example, you could pass variables to the CFM proxy via the URL, etc.
On a side note, have you noticed any improvements in performance since you're only making 1 remote script call? Or is it outweighed by any overhead in executing the ColdFusion inside the script?