How can I take common large chunks of oft-reused HTML source code?

Question

A slew of pages I've written for one of my web projects share some 144 identical lines of code, reproduced in each file. If I update one of those lines, I have to go back through ALL of the pages that share the code and update for each page. Is there a straightforward way to include HTML from a separate file?

And for bonus points, since so many pages use this code, it would be nice not to have to reload it for each page. Is there an easy way to store it in the browser's cache or only load the "content" section of the pages while leaving the rest of the page static?

Fountains of Thanks for any wisdom on this.

Mike

Answer 1

If we're assuming that you're talking straight html pages, with no server code (asp.net, php, or server side include ability), then in order to do both the including and the caching, you're going to need to use an iframe.

Each of your pages that duplicate the 144 lines of content should replace it with an iframe like so:

<iframe src="pagewithcontent.html"></iframe>

pagewithcontent.html would obviously be where you move the content to. The browser will cache the page appropriately, so that each parent page will simply get the shared content without making another request.

There's an article here that goes into great depth about html includes, and some javascript methods of doing it. I would strongly recommend against the javascript methods.

My answer reflects the assumption that you can't do anything on the server side. However, by far the best solution is to do so if you can.

Answer 2

I would recommend reading this article on includes

Answer 3

To include HTML from a separate file, use SSI (Server-Side Includes). This requires SSI support to be installed on the server, however.

You would write something like this in your files: <!--#include file="included.html" --> and that would include the file included.html when the page is accessed.

To load only the content of each page, use the XMLHTTPRequest object from JavaScript:

function LoadContent(url)
{
    if (typeof(XMLHttpRequest) == "undefined")
    {
        try
        {
            xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch(e)
        {
            try
            {
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch(e)
            {
                // fallback for browsers without XMLHttpRequest
                window.location.href = "no-ajax.php?url="+escape(url);
                return;
            }
        }
    }
    else
    {
        xmlhttp = new XMLHttpRequest();
    }
    xmlhttp.open("GET", url, false); // this request will be synchronous (will pause the script)
    xmlhttp.send();
    if(xmlhttp.status > 399) // 1xx, 2xx and 3xx status codes are not errors
    {
        // put error handling here
    }
    document.getElementById("content").innerHTML = xmlhttp.responseText;
}