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?
HTMLWeb Languages and Standards

Avatar of undefined
Last Comment
Badotz

8/22/2022 - Mon
Badotz

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.
ASKER
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?
Badotz

The 3 <div> elements hold the content - the CSS is obly for positioning and styling of the content.
All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
William Peck
Badotz

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.

 3-column liquid layout
Badotz

ASKER
ETC-Staff

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?
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
ASKER
ETC-Staff

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.
Badotz

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.

Badotz

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.
I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck
ASKER
ETC-Staff

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.  

Thanks
Badotz

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.
Banthor

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.

Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
Badotz

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

Please explain wht "full blown ajax" might be?
Badotz

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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<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!');
                return;
        }
        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
        xmlHttp.open('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
        xmlHttp.send(sc);
    }


    function page_load() {
        postVar();
    }


    window.onload = page_load;

</script>
</head>
<body>
<div id="maincontainer">
<div id="result"></div>
</div>
</body>
</html>

Open in new window

ASKER
ETC-Staff

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.  
Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes
Badotz

The <iframe> has to get the content from somewhere - where would that be?
ASKER
ETC-Staff

The pages would be uploaded to the same server.
Badotz

Without server interaction, I don't think you can use anything but an <iframe> to load your content.
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
ASKER
ETC-Staff

Are there any problems with using iFrames to do this?
Badotz

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.

ASKER
ETC-Staff

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.  
Your help has saved me hundreds of hours of internet surfing.
fblack61
ASKER CERTIFIED SOLUTION
Badotz

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
ASKER
ETC-Staff

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.
Badotz

No worries - glad to help.