JavaScript Demo:
Including Headers and Footers.

jim.cerny@unh.edu  23-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, active JavaScript is sometimes 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. As an alternative, see the last bulleted item.

• The header and footer files are JavaScript files, invoked by the SCRIPT tag, e.g.,

  <script language="JavaScript" src="incl-head.js">
  </script>
  
  <script language="JavaScript" src="incl-foot.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. Each script writes HTML into the current document window. The writing is organized as a stream of HTML and text enclosed in parentheses. It is divided into three lines in this demo for ease of author maintenance, using plus signs to concatentate the lines. Any valid HTML could be written and could be much more complex than what is shown here.

  document.write("<h3><font color='red'>" +
    "This is the test header." +
    "</font></h3>")
  
  document.write("<h3><font color='blue'>" +
    "This is the test footer." +
    "</font></h3>")
  

• We have a copy of the three files concatenated as literal (plain) text. If you have Netscape 4.x or Lynx you can look at the source code, but Explorer 4.x is too "smart" and acts on the code to format a Web page.