Frameset Script : The Code - JavaScript Tutorial - EchoEcho.Com

Frameset Script :

THE CODE

As mentioned on the previous page, you need to enter a small script in the <head> section of both your subpages and your frameset page.

THE CODE FOR THE SUB PAGES
The script to copy and paste to the <HEAD>-section of your subpages looks like this:

<HEAD>

<script>
function detect()
{
framesetpage="myframeset.htm";
thispage=window.location.href;
if (thispage.indexOf('://')<0) {thispage="://"+thispage;};
prefix=thispage.substring(0,thispage.lastIndexOf('://'));
suffix=thispage.substring(thispage.lastIndexOf('://')+3,thispage.length);
// alert('the subpage is:['+prefix+']['+suffix+']');
if (parent.location.href==window.location.href) {parent.location.href=framesetpage+"?"+prefix+"&&&"+suffix};
}
</script>
</HEAD>

Customize this line to fit your own pages (replace myframeset.htm with the name of your own frameset page.):

framesetpage="myframeset.htm";

In addition to adding the above script, you also need to add an onLoad-event to the <BODY>-tag.

That's it. After adding this piece of code to each of your subpages you're can proceed to the final step: adding a code-piece to the frameset-page itself.

Before describing the code to add to the frameset-page, we will explain how the code for the subpages works.

HOW IT WORKS

This line detects if the page is loaded into a frameset:

if (parent.location.href==window.location.href)

parent.location.href returns the url of the parent frame.
window.location.href returns the url of the current page.

Now, if these two are the similar it means that there are no parent frames: the current page is the top page.

In that case, this line is executed:

parent.location.href=framesetpage+"?"+prefix+"&&&"+suffix;

It opens the frameset page similar to if you had entered http://www.yourdomain.com/framespage.htm?http&&&www.yourdomain.com/subpage.htm
in the url box of your browser.

The trick of this entire script is that the script on the framespage can access the entry that follows the ? through the javascript built-in window.location.search object.

That is how the information is passed to tell the frameset page which subpage to load.

THE CODE FOR THE FRAMESET PAGE

This is the script to copy and paste to the frames page:

<HTML>
<HEAD>
<TITLE>MyFramesPage</TITLE>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
</HEAD>

<SCRIPT>
document.write('<FRAMESET COLS="50%,50%">');
document.write('<FRAME SRC="navpage.htm" NAME="nav">');
document.write('<FRAME SRC="'+subpage+'" NAME="main">');
document.write('</FRAMESET>');
</SCRIPT>

</HTML>

Customize the frameset values to fit your own page.

You need to customize this one line:

defaultsubpage="defaultsub.htm";

Replace defaultsub.htm with the name of your own default page for the frameset.

Also note, that in this line:

document.write('<FRAME SRC="'+subpage+'" NAME="main">');

main is the name of the "intelligent" frame. You can pick any name you want for the frame, we just used the name main for our example.

HOW IT WORKS

These lines detects if a value was passed to the frameset page following a ? in the url:

if (location.search) {subpage=location.search.substring(1)}
else {subpage=defaultsubpage}

If a value was entered after a ? in the url, then the script returns the value. Otherwise it returns the name you entered for the default page to load (in our example it would be "defaultsub.htm").

Now, if this page was called from a subpage that was loaded outside of the frameset, then the url would look something like this:

http://www.yourdomain.com/framespage.htm?http&&&www.yourdomain.com/subpage.htm

For technical reasons the subpage doesn't pass the URL of the subpage as is. It uses &&& instead of the normal :// that you usually see in a URL. (The reason is that netscape can't pass these values in a querystring).

This url based on &&& is translated into a real url by these lines at the top of our script:

if (subpage.indexOf('&&&')>=0) {
prefix=subpage.substring(0,subpage.indexOf('&&&'))+"://";
suffix=subpage.substring(subpage.indexOf('&&&')+3,subpage.length);
subpage=prefix+suffix;
}

The final part of our script is the document.write lines that writes the HTML for the frameset.

document.write('<FRAMESET COLS="50%,50%">');
document.write('<FRAME SRC="navpage.htm" NAME="nav">');
document.write('<FRAME SRC="'+subpage+'" NAME="main">');
document.write('</FRAMESET>');

The variable subpage either contains the url of the default page or - if the frameset was launched by a subpage - the url of the subpage to load into the "intelligent" frame.

<< PREVIOUS