Frameset Redirection

Redirecting visitors to your frameset

Many users find web sites using search engines or links on other sites. When this happens, they will probably go directly to one of your pages instead of your index.htm. If you want all visitors to see your site inside your Joust frameset you will need to add some code to the <HEAD> section of every page to detect this situation and redirect the browser accordingly.

<script language="JavaScript">
<!--
if (self == top) {
    self.location.href = '/index.htm';
}
//-->
</script>

This code checks to see if the frame the page is loaded in is the same as the "top" frame. If it is, then the page is not loaded inside a frameset so the browser is redirected to index.htm. This will ensure that all visitors to your site will be redirected to your home page, regardless of what URL they asked for.

If a visitor is looking for a particular page on your site then, after the Joust frameset has loaded, he/she should still get the page originally requested. Joust allows you to dynamically specify any other page by adding the URL of the page you want to load as a search parameter in the URL of index.htm. For example, if you wanted to set up a link to our site that took the user directly to the Joust download page, you would use http://www.ivanpeters.com/index.htm?page=dload.htm. So, to get a page to reload itself inside the Joust frameset you can use this code:

<script language="JavaScript">
<!--
if (self == top) {
    self.location.href = '/index.htm?page=' + self.location.pathname;
}
//-->
</script>

If a page is loaded in this way, Joust will also make sure that the sub menu containing the link to the page is opened and visible in the menu frame, and is selected, as if the user had clicked on it.

Note: To do this, Joust uses the findEntry method (with matchType set to "exact") to find an entry with a matching URL. For this to work, the URL that you supply in the search parameter must match exactly the URL used to define the menu entry. self.location.pathname returns an absolute path to the current document (starting with a / ). If the menu was not defined with an absolute path in the first place, Joust will not be able to find it. However, we will see later how to make sure the correct entry is displayed so don't worry about it.

Printing With Netscape

There is a trap to watch for with this. If a user tries to print a page in Netscape 4.0.x, the browser reloads the page in a separate, invisible 'printing' window. When it does this, it also re-executes any JavaScript in the page. The code above will cause the 'printing' window to reload index.htm and, since it can't print framesets, Netscape will report that there is nothing to print. The following, more complex, version of the above code will get around this problem:

if (self == top) {
    var navPrinting = false;
    if ((navigator.appName + navigator.appVersion.substring(0, 1)) == "Netscape4") {
        navPrinting = (self.innerHeight == 0) && (self.innerWidth == 0);}
    if ((self.name != 'text') && (self.location.protocol != "file:") && (document.cookie.indexOf('mode=NoFrames') < 0) && !navPrinting) {
        self.location.href = '/index.htm?page=' + escape(self.location.pathname);}
}

Netscape provides no way to detect that a page is being printed. So the trick here is to to take advantage of a "feature" of Netscape. When printing, Netscape seems to think that the page has zero size so by checking if the innerHeight and innerWidth properties we can tell if the page is being printed.

This code also has an extra test to see if the current mode is "NoFrames". This allows the same page to be used for Frames, Floating and NoFrames modes.

History

Redirecting the browser by setting the location.href property is easy and works on all browsers. But it does have a problem. Every page the user visits gets recorded in the browsers history list. When the user clicks the Back button, the browser goes back to the previous URL in the history. If the user came to page1.htm and was redirected to index.htm?page=/page1.htm then clicking the Back button would return him/her to page1.htm. The above code would then redirect the browser to the frameset. The user would be trapped!

There is no way around this for older browsers. But Netscape 3 introduces a new method that allows you to replace the current entry in the history list with a new one:

    self.location.replace(newURL);

This means that the page1.htm entry in the history list is replaced by index.htm?page=page1.htm. When the user clicks the Back button, the browser will go back to the previous site. Because this is not supported by all browsers, it is necessary to do some browser detection:

	if (parseInt(navigator.appVersion, 10) >= 3) {
    	self.location.replace(newURL);
	} else {
		self.location.href = newURL;
	}

Completed Code

So, putting it all together, the complete code to make sure that a page is correctly loaded inside your frameset is this:

<script language="JavaScript">
<!--
if (self == top) {
    var navPrinting = false;
    if ((navigator.appName + navigator.appVersion.substring(0, 1)) == "Netscape4") {
        navPrinting = (self.innerHeight == 0) && (self.innerWidth == 0);}
    if ((self.name != 'text') && (self.location.protocol != "file:") && (document.cookie.indexOf('mode=NoFrames') < 0) && !navPrinting) {
        var newURL = '/index.htm?page=' + escape(self.location.pathname);
        if (parseInt(navigator.appVersion, 10) >= 3) {
            self.location.replace(newURL);
        } else {
            self.location.href = newURL;
        }
    }
}
//-->
</script>

This should be placed at the top of each page of your site. Note that you may want to read TechNote 2 (Synchronisation) first.

Links and Bookmarks

The above code will make sure that everyone visiting your site will see the pages inside your frameset, regardless of how they came to the site. However, there is a bit of a "flicker" as the page is partly loaded before being redirected. Whenever you have control of the URL being used you should make use of the page= search parameter to make sure the link loads the frameset with the correct page first time.

Helping Search Engines index your site

Most search engines cannot understand and follow Framesets. Even if they could, they couldn't understand the Joust frameset because it is hidden inside a number of JavaScript commands. So, if you submit your site to a search engine it will visit your default page (index.htm) but it will not go any further because it doesn't know where to go.

You need to help out the search engine by putting ordinary links into the BODY section your index.htm that it can recognise and follow. For example:

<A HREF="page1.htm"></A>

Well Joust does this for you. The BODY section of index.htm contains a link to a file called robots.htm. To update the links in robots.htm, simply load the file inside your Joust frameset (by adding ?page=robots.htm to the URL for your index.htm) and click on the update list link. To see the robots.htm file in action on this site, click here.

The Joust Outliner