Need advice on alternative navigation schemes to current navigation bar with iframe for content

Posted on 2007-03-22
Last Modified: 2013-11-19
I'm seeking advice on how to solve a very standard web design issue.  At my website ( I have a side bar with navigation links and a main content panel.  The main content panel is implemented as an iframe and the content pages are separate and viewed on the main site only though the iframe of the content panel.

This technique works fine, but has the known downside that you can't link directly to any given subpage.  In other words it always says in address bar whether your at the history home page or your at with some other content in the iframe.  The problem is I really need all of these other pages that I allow to be viewed through my navigation bar to be separate pages.  Some of the content isn't even hosted on my server.

What are my options for working around this?
Question by:mdobbles
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 3
  • 2
  • +1
LVL 29

Expert Comment

ID: 18775011
>>Some of the content isn't even hosted on my server.

Does complicate things slightly, but I'd look at a good two column CSS layout.  Your iframes not only prohibit bookmarking but are going to mess up your SEO rank, as the spiders will have some trouble indexing your site.

I would also break to forum out completely, and just have a link back to the main site, or at least make the left nav significantly narrower.

You may have to revert back to an iframe or use some other method to break the same domain policy for the out of site content.  Maybe using an AJAX library like Dojo for those parts.

Author Comment

ID: 18777332
It is a two column CSS layout.  The issue is that in the second column of the layout I use an iframe.  I think I have to use the iframe because of all the scripts and ASP activity on the subpages I wrote and because of the third party content I include.  I thought of making the main frame be an ASP.NET page and I'd parse out of the URL the subpage for example to get to the forum I might have the URL  When the page came up I would parse the url and put the forum in the iframe.  This seems a little hokey to me though and I was wondering what was the way people really did these things.
LVL 29

Expert Comment

ID: 18778807
With ASP...


<div id="header"><!--#include file="myHeader.asp"--></div>

<div id="leftNav"><!--#include file="myMenu.asp"--></div>

<div id="content"><!--#include file="content.asp"--></div>


Save each page as it's own name, a don't parse the URL.

If the page retrieves off-site content then...

<div id="content><iframe src=""></iframe></div>

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

LVL 29

Expert Comment

ID: 18778966
Almost every web site I have has one template page with only the main content missing.

A real example:

Option Explicit

<!--#include virtual="/ee/CDOMailInclude.asp"-->
<!--#include virtual="/ee/include/thisPageViewed.asp"-->
' no browser caching of this page !! to be used on all pages
Response.ExpiresAbsolute = Now() - 1

' do not allow proxy servers to cache this page !! to be used on all pages

Dim articleName
articleName = "Page Title"
<html lang="en">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="author" content="Roderick Divilbiss">
<meta name="copyright" content="© 2005, 2006 Roderick Divilbiss">
<meta name="MSSmartTagsPreventParsing" content="TRUE">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="/include/css/all.css">
<link rel="stylesheet" type="text/css" href="/ee/include/ee.css">
<script type="text/javascript" src="/include/allPages.js"></script>
<script type="text/javascript">


<div id="topmenu"><!--#include file="topMenu.htm"--></div>
<div id="banner"><!--#include virtual="include/banner.htm"--></div>
<div id="mainmenu"><!--#include file="mainMenu.htm"--></div>
<noscript><p>You need JavaScript to view this example.</p></noscript>
<div><h1>Page Subject</h1></div>

<div id="theExample">example</div>

<div class="code"><pre>example code</pre></div>

<div id="pageCopyright"><!--#include virtual="include/copyright.htm"--></div>
<div id="legal"><!--#include virtual="include/legal.htm"--></div>


I write a lot of example code for this and other tech help sites.

Need a new page? Open the template and add the new content the save as a new name.  All the navigation, headers, copyright, etc. etc. are maintained as well as the layout.

Maybe my site has multiple sections,

       + includes   +
                          + css +
                                    - allPages.css
                          - allPages.js
                          - copyright.htm
                          - legal.htm
                          - banner.htm
       + examples +
                           - topMenu.htm
                           - mainMenu.htm
                           - pages ...
       + articles     +
                           - topMenu.htm
                           - mainMenu.htm
                           - pages ...
       + personal  +
                           - topMenu.htm
                           - mainMenu.htm
                           - pages ...


Then you'll see the same template in each sub-folder, but each sub folder may have a different navigation pages.

You only have one template page you can use everywhere, so you can think of the content division as your IFRAME in a sense.
LVL 44

Expert Comment

ID: 18784261
I dont see the problem.  You just LOAD a full webpage into the Iframe, and there it is.

Link to external --

As long as you provide the full URL, the page goes right in the Iframe.  Remember, an iframe is like a totally separate browser window, except embedded in the first.

If you want the location and title bar to show the full link, just put that in the link, as normal).

Since I dont see the problem, what am I missing?

Author Comment

ID: 18785546
The solutions suggested are all missing the point.

First, scratchcyboy:
The problem with my site is that all the navigation links are targeted to the iframe on my page.  This means that no matter what page you are on at my website, the address in the navigation bar is  This is a problem because I'm going to start adding a lot more pages to my site and I want people to be able to bookmark individual pages.  Also I want to put advertisements on google that direct people to individual pages -- something I can't do with my current scheme.

I definitely understand how to do css div's.  In fact my site is completely based on css div's.  That's how I do my title bar, and my two column navigation and content sections.  In fact my iframe is in a css div.

The issue is this if I have one page that is my master template and if I have multiple separate pages that are included in that master template as iframes, then I'm starting to think that the only way I can give people the ability to directly navigate to subsections of my site is to provide a scheme where I parse the url such as for example having take you to the forum section of my site.

The subsections must remain on their own pages separate from the template main page.  I might be missing something in the sugestions, but so far the only way I've heard that I can have ONE MASTER MAIN PAGE with navigation, title bar etc..., and MULTIPLE SEPARATELY MAINTAINED CONTENT PAGES is my suggestion of parsing the url and programatically creating the ability to link directly to subsections.

LVL 29

Accepted Solution

rdivilbiss earned 500 total points
ID: 18785705
I guess I didn't explain well enough, but imagine the following request:

That link never goes to your master page.

So you decide to do:

That goes to your master page, but how do you get the content into the content area?

Using your current IFRAME set up you can parse the query string for cat and page and load the IFRAME with a dynamic URL created from those parameters, or you can maintain all your pages in a database and retrieve them into any element, or you could use AJAX to go get the page content and put it in the desired element.

All have various problems, not the lease of which would be performance, and the second example is not SEO friendly.

So go back to the first URL.  On Apache you could use mod rewrite to rewrite the URL and serve up the desired content.  But you are on IIS.

So, to gain the advantage of having only one master page, lets break that master page into its constituent parts.


Your default home page then looks like this:

<!--#include file="master_banner.aspx"-->
<!--#include file="master_nav.aspx"-->
<!--#include file="master_content.aspx"-->
<!--#include file="master_footer.aspx"-->

You night think great!

I can just add parse the command line for the page and write that as an include in the content section of my master page, but the include occurs prior to the ASP code on IIS,

So your closest alternative is for each content page to have the following structure:

<!--#include file="master_banner.aspx"-->
<!--#include file="master_nav.aspx"-->
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras dolor. Sed sed neque. Duis eros justo, bibendum in, placerat eget, ullamcorper vel, nibh. Praesent urna arcu, sagittis eget, semper laoreet, tempus non, augue. In a pede. Vestibulum consequat eleifend sem. Duis tristique tortor ultricies massa. Duis sapien eros, posuere sit amet, rhoncus non, venenatis bibendum, tellus. Donec dui tortor, dignissim quis, eleifend eget, fermentum a, massa. Maecenas vel enim vitae sapien condimentum eleifend. Duis hendrerit luctus dui. Donec sem dui, posuere a, consectetuer eget, pretium aliquet, turpis. Vestibulum posuere porta lacus. Sed convallis molestie purus. In hac habitasse platea dictumst.
<!--#include file="master_footer.aspx"-->

This will also work for those few off site pages:

<!--#include file="master_banner.aspx"-->
<!--#include file="master_nav.aspx"-->
<iframe src="http://........>
<!--#include file="master_footer.aspx"-->

So you have in essence what you are asking for, in that the content for the master page is separate from the content of the individual page contents and is maintained separately.  You also have the content pages wholly separate, other than they have includes to the master pages content.  They are small, build dynamically on load.

If you look at master pages in .NET design environments, this is what is occurring:

Since your site uses .NET, you could download a free trial of MS Expression Web and check out the master pages and dynamic web templates.

LVL 44

Expert Comment

ID: 18785773
"The problem with my site is that all the navigation links are targeted to the iframe on my page.  This means that no matter what page you are on at my website, the address in the navigation bar is  This is a problem because I'm going to start adding a lot more pages to my site and I want people to be able to bookmark individual pages.  Also I want to put advertisements on google that direct people to individual pages -- something I can't do with my current scheme."

You can rewrite the status bar to show the correct link VERY EASILY !!!!  Just put it in the link.

But to encapsulate sites like Yahoo and Google in an IFRAME is fighting everyone.  People don't like it, the companies like Google hate it, and they have all kinds of code on their pages to "break out of" any frames OR IFRAMES.  Besides which, it looks like your content, so you have a LIABILITY issue too.

You are missing the obvious way to do this, that everyone expects.  Keep your main page as a launching point for all these links, and open each other sites content is a SEPARATE window.  That is what people expect, and want.  I personally HATE sites that try to cram content that was meant for a full 1024x768 display (almost every major site today) into someone else's window.  It is fighting the obvious.

Make multiple windows and your site will be much more acceptable.  I ahve done what you want to do, and it works for only 25% of pages.  The other 75% need to occupy their OWN resizable window.

Expert Comment

ID: 18804565
From what I can see, the iframe is not needed at all.  Just make the content div a regular div and remove the "target='MainFrameTarget'" from your navigation links.  Then all you should have to do is add your header and navigation sections to those corresponding pages.

The only page I can see that you might want to keep in the iframe is the Timeline considering how wide it is.

Author Comment

ID: 18805237
I think I have a reasonable solution now.  I just updated my site.  Basically what I did is use the .NET masterpages idea to handle most of my formatting, then my individual pages I swapped out content.  I still needed to use an iframe for my page called "timeline" because it has a bunch of scripts that were in conflict with the scripts that I have on my master page.
LVL 29

Expert Comment

ID: 18805340
The timeline is a great concept. I like it a lot. It deserves more attention from a development standpoint to be more fluid...but it can really set your site apart.

Good luck with everything.

Featured Post

[Live Webinar] The Cloud Skills Gap

As Cloud technologies come of age, business leaders grapple with the impact it has on their team's skills and the gap associated with the use of a cloud platform.

Join experts from 451 Research and Concerto Cloud Services on July 27th where we will examine fact and fiction.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Australian government abolished Visa 457 earlier this April and this article describes how this decision might affect Australian IT scene and IT experts.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

623 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question