How to merge several simple HTML files into a HTML document

Do you need to maintain a single-page version of a multipage HTML document? if the document is composed completely of HTML documents in a flat directory that use the same CSS style sheet, you can get good results by simply merging all the files using a page nearly identical to this. In fact, you can save the source of this page and just change the filenames in the loadthem() function to try out the method.

The resulting file prints well, and can be used with find utilities and spell checkers in most browsers. It requires support of JavaScript and the HTML IFRAME element.

Basically, The JavaScript functions in this page read a list of HTML documents into IFRAME elements that are being displayed with no size and then access that HTML and copy it into a DIV element created in the main page. The result is that you get the effect of including all the files into a single file.

The merged files' header sections are essentially ignored, meaning this does not work well unless all the sections use the same style sheet and are all in the same directory or do not use other files (such as images) by a relative pathname.

This method has an advantage over scripted solutions available to Unix users using simple scripts and utilities such as sed(1) to merge the files. The only time you have to edit the file is to add or delete sections, for example. Some Internet Providers provide WWW servers that let you do something similar (very much like the cpp(1) (ie. the C preprocessor) "#include" directive). But this simple merging of files does not let you reproduce a complex document any better than the method shown here.

All of the JavaScript required is shown below in it's simplest form. The source for this file is slightly fancier in that it puts page breaks and labels between each document. This works with current versions of the firefox(1), iexplore(1), opera(1), and safari(1) commands. The CSS styles, scripts and HTML were all kept as a single file to make it easier to start your own merged document.

<script language="JavaScript1.1"  type="text/javascript">
/* create an IFRAME to copy from and a DIV to copy to */
function append(target){
   document.write('<div id="display' + FRAMECOUNT + '"></div>');
   document.write('<iframe width="0" height="0" id="buffer' );
   document.write( FRAMECOUNT + '" name="buffer' + FRAMECOUNT + '" src="' + target + '" ');
   document.write('\'buffer' + FRAMECOUNT + '\',');
   document.write('\'display' + FRAMECOUNT + '\'');
/* on load of iframe displays body content of IFRAME document in DIV */
function copyIframe(iframeId, divId ) {
    var CurrentDiv = document.getElementById? document.getElementById(divId): null;
    if ( window.frames[iframeId] && CurrentDiv ) {
        CurrentDiv.innerHTML = window.frames[iframeId].document.body.innerHTML; = 'block'; 
function loadthem(){

The merged files (one fable per file)