Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17


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

Posted on 2007-03-22
Medium Priority
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>


Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

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 2000 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

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

Question has a verified solution.

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

Although a lot of people devote their energy toward marketing for specific industries, there are some basic principles that can be applied to any sector imaginable. We’ll look at four steps to take and examine how those steps were put into action fo…
When it comes to security, close monitoring is a must. According to WhiteHat Security annual report, a substantial number of all web applications are vulnerable always. Monitis offers a new product - fully-featured Website security monitoring and pr…
The viewer will learn how to count occurrences of each item in an array.
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.
Suggested Courses

670 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