JAVASCRIPT UTOPIA  back to
CLIENT-SIDE INCLUDES  


client-side includes
a server side include adds an external html snippet to any number of pages. with javascript, you can do the same thing, but the including of the snippet occurs at render time in the browser instead of on the server. hence "client-side include". a client-side include works offline and presents interesting options for conditionally using portions of the included html depending on the properties of the page using it (e.g., don't include the snippet if the page is in a frameset).

here's how to add a client-side include to a page:

step one: create the include file
the include file is simply a .js file with a document.write() call that adds the desired html to the target page(s). creating a properly formatted string to write out can be tedious though, so you'll probably want to use the tool below to generate your include file. currently the tool works only on windows (i'm not bothering to detect mac or unix and find the appropriate end of line character sequence. some day i will...).

source code box


include box


step two: save your include file
copy the code from the include box above into a blank text file. save it as whatever file name you like, with a .js extension. for example: myInclude.js.

step three: link to your include file
on every page that you want your included html to appear, add the following code exactly where you want the html to show up:

<SCRIPT LANGUAGE="JavaScript" type="text/javascript" src="myInclude.js"></SCRIPT>

change the file name ("myInclude.js") to match the name of the .js file you created in step two.

demo
here's a sample showing the code in action.


revision history

may 31, 2001: posted.