ColdFusion JavaScript includes
(July 7, 2004)
As you work with ColdFusion you may encounter situations where you want to place content that is dynamically generated by a ColdFusion application on web pages that aren't on your ColdFusion server (static HTML files or web pages generated by other application servers). This page describes a simple technique for using JavaScript to include ColdFusion content in a non-ColdFusion web page as the page is loaded by the user's browser.
Note that because this method uses JavaScript, it won't work for browsers that don't support JavaScript (such as Netscape users who have JavaScript turned off or non-JavaScript-enabled browsers on PDAs). There may also be accessibility issues with some screen readers.
Getting started
Start by creating two files, one CFML file (with a .cfm extension) and one HTML file (with a .htm or .html extension). For testing purposes these can be on the same server, but ultimately the point is to have them on different servers.
Here's the code for the CFML file, which we'll call source.cfm. For purposes of this example we'll assume that the URL of this file is http://www.mycfserver.com/source.cfm.
<cfoutput>
<p>The date today is #DateFormat(Now())#.</p>
</cfoutput>
Here's the code for the HTML file, which we'll call page.html. For purposes of this example we'll assume that the URL of this file is http://www.mywebserver.com/page.html.
<html>
<body>
<p>Welcome to my web site.</p>
</body>
</html>
Each of these is a working file; currently they have no relationship to each other. Our goal is to include the output of source.cfm in the body of page.html, so that the web page will show the current date. (I know you could use JavaScript to display the date without using ColdFusion; it's just an example.)
Including the ColdFusion page in the web page
To make page.html include source.cfm, modify page.html to look like this:
<html>
<body>
<p>Welcome to my web site.</p>
<script src="http://www.mycfserver.com/source.cfm"></script>
</body>
</html>
SCRIPT is an HTML tag used to include JavaScript code in a web page. In this case the SCRIPT tag is empty but the src attribute is used to include JavaScript from another file.
At this point page.html will still load, but it won't show the date and it will throw a JavaScript error. This is because the source file (source.cfm) doesn't yet contain any JavaScript.
Making the ColdFusion template output JavaScript
To make source.cfm produce JavaScript that can be included in page.html using the SCRIPT tag, modify source.cfm to look like this:
<cfcontent type="application/x-javascript; charset=utf-8">
<cfsetting showdebugoutput="no">
<cfoutput>
document.writeln('<p>The date today is #DateFormat(Now())#.</p>');
</cfoutput>
The CFCONTENT tag is used to tell ColdFusion to use the JavaScript MIME type for the output of this template. This is required for your web browser to recognize the output of source.cfm as JavaScript and include it in the SCRIPT tag. (The charset section tells ColdFusion what character set to use to output the data; if you wish you can specify a different character set from UTF-8.)
The CFSETTING tag is used just in case you have debug output enabled on your ColdFusion server and the person who visits the site is someone who gets to view debug output; if so, the debug output would be appended to the JavaScript output and cause it to no longer be valid JavaScript.
Finally, any output produced by source.cfm has to be valid JavaScript. The simplest way to do this is to take any HTML output you were generating before and enclose it in the JavaScript document.writeln() function. This function causes a line of HTML to be added to the web page where the file is included. In other words, when page.html includes source.cfm in the SCRIPT tag, the effect is to dynamically add lines to the HTML source code of page.html as it's displayed.
At this point page.html should load and display the text provided by source.cfm (a paragraph containing the current date). Try it out!
Going further
You can go much further with this approach and use pretty much any ColdFusion tags and any JavaScript functions you wish. For example, to display the output of a query, you could modify source.cfm to look like this:
<cfcontent type="application/x-javascript; charset=utf-8">
<cfsetting ShowDebugOutput="no">
<cfquery name="MyQuery" datasource="MyDatasource">
SELECT FirstName, LastName
FROM tblPeople
ORDER BY LastName, FirstName
</cfquery>
document.writeln('<ul>');
<cfoutput query="MyQuery">
document.writeln('<li>#LastName#, #FirstName#</li>');
</cfoutput>
document.writeln('</ul>');
Now page.html would display the output of MyQuery (in this case, names in a bullet list). Any other ColdFusion tags you normally use would also work, as long as they produce JavaScript functions.
Warning: Because the document.writeln() function in this example uses single quotes to delimit the text output, it will break if there are single quotes in the query output. If you think there will be single quotes, you need to do use the Replace function to get rid of them, like this:
document.writeln('#Replace(MyOutput,"'","’","ALL")#');
You can also pass parameters from the web page to the ColdFusion source. This means the same ColdFusion source can provide different content for different web pages. Suppose you modify page.html to look like this:
<html>
<body>
<p>Welcome to my web site.</p>
<script src="http://www.mycfserver.com/source.cfm?color=green"></script>
</body>
</html>
Going back to the simpler version of source.cfm, above, you can modify the ColdFusion code to behave differently depending on what parameters are passed to it. The URL parameters specified in the SCRIPT tag in page.html become available like any other URL parameters in ColdFusion:
<cfcontent type="application/x-javascript; charset=utf-8">
<cfsetting showdebugoutput="no">
<cfoutput>
document.writeln('<p><font color="#URL.color#">The date today is #DateFormat(Now())#.</font></p>');
</cfoutput>
On the JavaScript end of things, obviously there are lots of JavaScript functions besides document.writeln() that you could use. Your ColdFusion template could generate JavaScript that modifies form elements or changes stylesheet properties, for example.
Finally, as long as you can control the MIME type of the source, you can of course use this method to generate dynamic content from other web application platforms such as Perl, JSP, or PHP.