Reframer: Bottom Frame

Reframer

The Bottom Frame

One of the big problems with using frames is that surfers often end up on one of your pages outside of your frameset. The scripts on these pages show you how to determine whether or not a page is being accessed "deframed" and, if so, out to "reframe" the page.

I'll explain how everything works a bit later. For now, if you just want to use the scripts on your own site, here are the steps to follow:

For each page that you want the ability to reframe, insert the following JavaScript code between the </HEAD> and <BODY> tags:

<SCRIPT LANGUAGE="JavaScript">
<!--
if(window.top==self) { 
    var parentURL = "Put the name of your FRAMESET page here"
    var childURL = window.location.href
    var reframeURL = parentURL + "?" + childURL
    location.href = reframeURL
}
//-->
</SCRIPT>

In the above code, replace Put the name of your FRAMESET page here with the filename of the page that contains your <FRAMESET> tags (don't delete the quotation marks).

In the page that contains your <FRAMESET> code, insert the following JavaScript code between the </HEAD> and <BODY> tags:

<SCRIPT LANGUAGE="JavaScript">
<!--
    var frameSRC
    if (location.search)
        frameSRC = location.search.substring(1)
    else
        frameSRC = "Put the name of the default frame page here"

    document.write('<FRAMESET ROWS="125,*">')
    document.write('<FRAME SRC="Put the name of your top frame here">')
    document.write('<FRAME SRC="' + frameSRC + '">')
    document.write('</FRAMESET>')
//-->
</SCRIPT>

In the above code, change the following line to the name of the default page you load into the frame:
```
        frameSRC = "Put the name of the default frame page here"
```
In the above code, the various document.write statements are used to construct the frames on-the-fly. Rewrite these statements to suit your own frame setup. Note, however, that you must leave the following line more or less as is:
```
    document.write('<FRAME SRC="' + frameSRC + '">')
```
This line creates the frame that is used to hold the previously deframed page, so position it within the FRAMESET accordingly. The only time you'll need to modify this line is if you have extra attributes you need to put into the <FRAME> tag. For example, if you've named your frames, you'll want to add the NAME attribute. Here's an example:
```
    document.write('<FRAME SRC="' + frameSRC + '" NAME="bottom">')
```

How the Code Works

First off, here's the frame code I'm using for this frameset (this is reframer.asp):

<FRAMESET ROWS="125,*">
<FRAME SRC="reframer-top.asp">
<FRAME SRC="reframer-bottom.asp">
</FRAMESET>

The page reframer-top.asp doesn't do much of anything in this example. The real action is in the page reframer-bottom.asp, which is the page you're reading now. This page contains the following JavaScript code:

<SCRIPT LANGUAGE="JavaScript">
<!--
if(window.top==self) { 
    var parentURL = "reframer.asp"
    var childURL = window.location.href
    var reframeURL = parentURL + "?" + childURL
    location.href = reframeURL
}
//-->
</SCRIPT>

This code checks to see if the page is currently deframed (that is, if top==self). If so, then the code gathers the URL of the parent page (that is, the page that contains the frame code), and the URL of the child page (that is, the current, deframed page). It then constructs a reframed URL by combining the parent URL and the child URL with a question mark ("?") in between. It then tells the browser to load this weird URL. Here's an example:

reframer.asp?reframer-bottom.asp

What's the deal with the question mark? Well, that's a trick that I use to get the browser to load the deframed page within the proper frame. The frameset page contains the following JavaScript code:

<SCRIPT LANGUAGE="JavaScript">
<!--
    var frameSRC
    if (location.search)
        frameSRC = location.search.substring(1)
    else
        frameSRC = "reframer-bottom.asp"

    document.write('<FRAMESET ROWS="125,*">')
    document.write('<FRAME SRC="reframer-top.asp">')
    document.write('<FRAME SRC="' + frameSRC + '">')
    document.write('</FRAMESET>')
//-->
</SCRIPT>

If the URL contains a question mark, then location.search returns true and the frameSRC variable is set to location.search.substring(1), which is everything after the ? in the URL. (It is, in other words, the URL of the deframed page.) Otherwise, frameSRC is just set to the URL of the default frame page. The code then uses document.write() statements to write the frameset code.

To prove that this works, the link below points to reframer-bottom.asp (this page). Click the link and you'll see that the browser loads the page into the frameset:

This is a link to reframer-bottom.asp

What if you try and deframe a page that's not part of the original frameset? No problem, as you'll see if you click the following link:

This is a link to a page named reframer-bottom2.asp