BEGIN "incl-body.html" here -------------------------> Demonstration of JavaScript includes

JavaScript Demo:
Including Headers and Footers.

jim.cerny@unh.edu  21-SEP-1998

To maintain flexibility in changing the format of your Web pages, a useful technique is to include other files. Consider the usefulness of including a standard header and footer on a series of files that you may want to redesign from time to time. If you include a header and footer file, all you need to do is to edit those two files to effect the changes on all your pages.

This page is an example of that technique, using JavaScript, for what are called "client-side includes," i.e., the header and footer are called and inserted by your browser as it displays the Web page. An alternative is what are called "server-side includes," i.e., where the Web server assembles what appears to be a single Web page to your browser; the Apache Web server used for UNHINFO supports server-side includes, but we've disabled that feature for security reasons.

To understand this technique, look at the source code for this file and read the following notes. Caveat: Using your browser to display source code that contains embedded JavaScript is often difficult. With Netscape 4.x the "View-->Page Source" command shows the the resulting HTML source file after the include takes place, while with Internet Explorer 4.x the "View-->Source" command shows the source file as-is, without the resulting merger that is displayed on-screen. For the JavaScript files, Netscape 4.x shows the resultant code, not the actual JavaScript, while Internet Explorer by default wants to save the code to disk. For these reasons, has a link to a list of all the code.

  • The header and footer files are JavaScript files, invoked by the SCRIPT tag, e.g., 
    <script language="JavaScript" src="incl-head.js">
</script>
  • Place the SCRIPT tags where you want the inclusion to take place, in this case just after the opening BODY element and just before the closing BODY element.

  • The JavaScript for the header and footer files used in this example are identical except for the HTML content that is generated. It writes HTML into the current document window. This is organized as a stream of HTML and text enclosed in parentheses. It is divided into three lines here for ease of author maintenance, using plus signs to concatentate the sections. 
    document.write("<h3><font color='red'>" +
  "This is the test header." +
  "</font></h3>")

  • To avoid browser complications, we have a copy of the three files concatenated as plain text.
END "incl-body.html" here -------------------------> BEGIN "incl-head.js" here -------------------------> document.write("

" + "This is the test header." + "

") END "incl-head.js" here -------------------------> BEGIN "incl-foot.js" here -------------------------> document.write("

" + "This is the test footer." + "

") BEGIN "incl-foot.js" here ------------------------->