Link to home
Create AccountLog in
Avatar of ETC-Staff
ETC-StaffFlag for United States of America

asked on

Use iframe or include for header, footer, navigation

We generally use include files using ColdFusion on our site.  We need to build a site on a server that only supports static HTML.  Would iFrames work for the header, footer and left navigation?  Has any one encountered any problems with this?
Avatar of Badotz
Flag of United States of America image

I would use CSS and <div> elements instead of <iframe> elements.

A quick internet search for liquid 3-column layout is a good place to start.

This is the first result.
Avatar of ETC-Staff


We were looking for something that could be used to include a standard header, footer, and navigation on all pages.  I can see where you could use this to change the appearance, but how would you use it if the content was updated?
The 3 <div> elements hold the content - the CSS is obly for positioning and styling of the content.
header and footer holf the content for the, um, header and footer, while col1 (left-most), col2 (center) and col3 (right-most) hold the content.

 User generated image
I guess I am missing something.  If we change the content on one page, for example, change a navigation link, we want that to change on all the other pages.  I don't think this will do that.  Am I wrong?
I don't think I was clear in my original question.  We want to be able to change the content of the header, footer, or navigation on one page and then have that show up on the others.  I have done this in the past with include files in Coldfusion and  ASP, but this site only supports static HTML.  I thought we would be able to us the iframe tag to import these into all the pages.  I wanted to know the pros and cons of doing this.  Sorry for the confusion.
If by "creating static pages" you mean the server emits HTML to the client, then it doesn't matter about the content since it is dynamic (each request for a different page requires the server to create it).

If "static HTML" means no embedded ASP or PHP, then you could use Ajax when the page loads to communicate with the server for the varying content. It is kept up-to-date on the server (in one place) and would be fetched when each page loads and stuffed into the appropriate HTML element.

Note that Ajax does not require the .NET framework (and all the baggage that comes with it); it does not rely on an external JavaScript library (and all the baggage that comes with it); it can be written in plain and simple JavaScript code.

Others will swear by .NET and/or jQuery (a JavaScript library), but there is another path one may follow: JavaScript and your server-side technology communicating with one another.
Would anything need to be installed on the server to use Ajax?

This is going to be maintained by someone who is not a programmer and will not have access to the server other than to upload pages.  We were wondering if creating a header, footer, and navigation and including them in each page with iFrame tags on each page would have any problems.  

There is no need for <iframe> elements.

>>Would anything need to be installed on the server to use Ajax?

Presumably, IIS (or Apache) is serving your web pages. IIS supports ASP (and PHP with some assistance), and Apache supports PHP.

That should be all you need. You will have to determine how the data is stored on the server - in text files, in a database - and how to tell what bit of information goes where - link URLs, header/footer and page content.

Basically, the scenario looks like this:

When a page loads, the window.onload event fires, and a JavaScript function is invoked to make the Ajax request for content.

The server acts upon the request, sending the correct content to the correct page.

The client parses the data and disseminates the data wherever it needs to go.
Ajax in this case would be updating the content of the rendered client. You don't really need full blown ajax installed for this, simple DOM / Javascript can do this simply.

If your web server is IIS on Windows you also have the capability to add a Site Header and Footer through the server rather than the HTML. These would appear on any content delivered including direct access to images, pdf, and error messagess.

Check out IIS help for instructions on how to do this.  

I still use Iframes on occasion, especially when I need high performance and user dynamic content, but there are more considerations.

>>You don't really need full blown ajax installed for this

Please explain wht "full blown ajax" might be?
Here is an example that can be modified to fit your needs (untested):

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">
<html xmlns="" xml:lang="en" lang="en">
<title>Simple Ajax Example</title>
<meta http-equiv="CACHE-CONTROL" content="NO-CACHE" />
<meta http-equiv="PRAGMA" content="NO-CACHE" />
<meta http-equiv="content-language" content="en" />
<meta content="text/JavaScript" http-equiv="content-script-type" />
<meta name="language" content="en" />
<script type="text/javascript">
    function get_ajax_obj() {
        var xmlHttp = null;
        try {
                // Firefox, Opera 8.0+, Safari
                xmlHttp=new XMLHttpRequest();
        catch (e) {
                // Internet Explorer
                try {
                        xmlHttp=new ActiveXObject('Msxml2.XMLHTTP');
                catch (e) {
                        xmlHttp=new ActiveXObject('Microsoft.XMLHTTP');
        return xmlHttp;

    function updt() {
        if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                // Retrieve the result of our ASYNCH Ajax request...
                var result = xmlHttp.responseText;
                // ... and stuff it into a <div> element
                document.getElementById('result').innerHTML = result;

    function postVar() {
        xmlHttp = get_ajax_obj();

        if (xmlHttp == null) {
                alert ('Your browser does not support AJAX!');
        var myVar1 = "fred";  //some value here;
        var myVar2 = "ethel"; //some other value here;
        // Broker that does your bidding
        var url = 'my_server_side_script.asp';
        // Values to submit
        var sc = 'myVar1=' + myVar1 + '&myVar2=' + myVar2;
        // Make an ASYNCH request'POST', url, true);
        xmlHttp.setRequestHeader('If-Modified-Since', 'Sat, 1 Jan 2000 00:00:00 GMT');
        xmlHttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded; charset=UTF-8');
        xmlHttp.setRequestHeader('Content-length', sc.length);
        xmlHttp.setRequestHeader('Connection', 'close');
        // Invoked upon completion of the request
        xmlHttp.onreadystatechange = updt;
        // Do the deed

    function page_load() {

    window.onload = page_load;

<div id="maincontainer">
<div id="result"></div>

Open in new window

We don't have access to the server other than to upload pages.  It only supports HTML, no asp or PHP.  It sounds like JavaScript loading the header, footer, or navigation would load them into the divs.  Need to check on how this is done.  The iframe solution seems the simplest to implement, but we wanted to know if there are any known issues with that solution.  If there are, then we need to find another solution.  This solution will be maintained by a user using Dreamweaver with no programming skills so we want to keep it as simple as possible.  
The <iframe> has to get the content from somewhere - where would that be?
The pages would be uploaded to the same server.
Without server interaction, I don't think you can use anything but an <iframe> to load your content.
Are there any problems with using iFrames to do this?
I really can't say, having never had to rely on them for my page content.

I would create a page with the header <iframe>, and try it. If it works, add the footer <iframe> and make sure it works; then add the navigation <iframe> and make sure it works; then add the content <iframe> and make sure it works; etc., etc., etc.

We can get it to work.  I was wondering if there were any issues with using them.  The only thing I could find on the net were a few comments about them not be accessible by search engines and at one time were not usable in some browsers, although the current list I saw includes the major ones.  Not sure they aren't confusing frames with iFrame tags.  I hoped to find somebody here who might have had some experience with them.  
Avatar of Badotz
Flag of United States of America image

Link to home
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
That's pretty much what I was looking for.  Will present that to the owners of the site with a recommendation of using a server side language if we can get one installed.  I think they are running Linux so will suggest PhP as its free.  Thanks for the help.
No worries - glad to help.