Using Redirects with Frames

Overview

This tutorial is for people who have sites that use frames. In a framed site, there is usually at least two frames; a navigation frame which holds the links to navigate around the site, and a content frame which holds the page's content. Of course there may be more than two frames, but I'll focus on just two for simplicity.

Normally, a user navigates to a site by entering the URL like http://scriptasylum.com. Usually, most people don't usually type in the specific page they want, they use the site's navigation. But let's say for example, a user does type in the exact URL of the page they want to go to like: http://scriptasylum.com/mouse.html. This works OK.... until you get to a site that uses frames.

The Problem...

Since most people usually use one frame for navigation and one or more for site content, typing the URL directly causes a problem: The page loads, but the rest of the other frames aren't loaded. Therefore, you can't navigate around the site unless they happen to know the exact URLs of the pages they want to see.

Click the links below to demonstrate this effect.

The only link that loaded the frames the proper way was the "Index Page" link. That is because this page contains the HTML that sets up the frames. In order to load the site the proper way, the user must always go to the site using the index page.

A Solution

A way to go around this limitation woould be to put a script in each page that checks to see if the page was loaded with the proper frames. If the user types in a direct URL, the script redirects you to the index page which loads the site using the proper frameset. This script is actually quite simple, you just paste a few lines of javascript code into the HEAD section of all the pages in your site EXCEPT the index page:

<script language="javascript">
if(self.location==top.location)self.location="index.html";
</script>

This solution works great; it's easy to add to any page and there's nothing to change. The only bad feature is the site will always load the default home page no matter what URL they actually typed. Some people may find this annoying. It would be really great if the user could simply type the page they wanted to go to and it would automatically load the proper frames with the page they typed in where it should be!

The only page this would be prefect in would be the navigation page. If someone typed in the navigation page URL (which is unlikely), it's OK for the frameset to load the default setup.

A Better Way

With a little more tweaking to the script above, you can redirect and load the page the user wants. The trick is to "tell" the index page what page the user really wanted to see. So, when the script redirects to the index page, a script will "read" this information and load the right page. Just use the script above, but add a question mark and the page URL to the end of the rest of the URL:

<script language="javascript">
if(self.location==top.location)self.location="index.html?page1.html";
</script>

The example above would redirect to index.html and then load page1.html into the content area instead of whatever the default page would have been. You must put the name of the current page in the script though. So, in page2.html, you have to put "?page2.html". Don't forget: this has to be done to every page EXCEPT the navigation page and the index page.

You'll have to add another little script to the index page too. This is so it can know which page to really load. If you dont have a ? in the URL, it will simply load the default home page. Just paste this script into the HEAD section of your index page (the page that sets up the frames):

<script language="javascript">
var fname="content";     //MAIN CONTENT AREA FRAME **NAME**

window.onload=function(){
var d=document.location.search;
if(d!='')top.frames[fname].document.location.href=d.substring(d.lastIndexOf('?')+1,d.length);
}
</script>

The only setting you have to adjust is the frame name. When you set up your frames, you must have given at least the content frame a name. Just enter this name in the script above. This script also assumes the content frame is not nested inside any other frames. If so, you can adjust the script accordingly.

Click the links below to demonstrate the script in action. Each of these links loads just the page each says.

Each link opened the page intended without having to re-navigate to the specific page once the frameset was loaded.

Recap

OK, now I will recap which script is to be in which page just to make sure no one gets confused.

Paste this JavaScript code into the HEAD section of your index page (the page that sets up the framesets). Don't forget to adjust the frame name in the script!

<script language="javascript">
var fname="content";     //MAIN CONTENT AREA FRAME **NAME**

window.onload=function(){
var d=document.location.search;
if(d!='')top.frames[fname].document.location.href=d.substring(d.lastIndexOf('?')+1,d.length);
}
</script>

Paste this JavaScript code into the HEAD section of all your content pages. Do not paste this code into the index page or your navigation page. Don't forget to put the page URL in the right place!

<script language="javascript">
if(self.location==top.location)self.location="index.html?page_URL_here";
</script>

Paste this JavaScript code into the HEAD section of your navigation page. There are no settings to adjust in this one.

<script language="javascript">
if(self.location==top.location)self.location="index.html";
</script>

I have all the HTML pages I used for this example compressed into one ZIP archive, which can be downloaded here.

Good Luck!