The included script

So as an example, let's assume a user comes directly to this page, framecustom.html. As soon as the page starts loading, the included script starts working. First of all it reads out the name of the current page by taking everything behind the last slash / in the URL:

var naar = location.href.substring(location.href.lastIndexOf("/")+1);

Now I have the name of the page the user is on.

Please note that this only works when all pages are in the same directory, as is the case with this site. If the pages are divided over several directories this bit of script gives the wrong page name, since it doesn't pay any attention to the directory.
To solve this, use location.pathname to get the full path from the root directory.

Then for the actual check. See if the frame the page is in is the top (top == self). It is, since the user only sees this page. Therefore we replace the location of top with index.html?framecustom.html, so we add the name of this page behind a ? after the index.html

if ((top != self.parent) || (top == self))
{
	top.location.replace('index.html?' + naar);
}

Now the user goes to index.html

By using replace index.html replaces this page in the history of the browser, so that if the user hits the Back key, he's sent back to the site he was on before coming to my site. If I didn't use replace, it would be impossible to use the Back key since the user would be sent back to this page and immediately sent forward to the frameset again. Not very user friendly.

The script on index.html

This script uses some string methods. See the strings page for more info on indexOf and substring.

So now the user loads index.html?framecustom.html . In itself, this solves nothing: without some extra scripting the user would still see the homepage because by itself the browser ignores the ?framecustom.html bit.

That's where the script on the index page comes into play. First of all, it checks if there's a ? in the URL and puts the index number + 1 of the question mark in query. I add 1 because that makes the script more easy.

var query = (location.href.indexOf("?")+1);

Then I define the variable page and put the default value in it: the homepage:

var page = 'intro.html'

Finally, if there's a ? in the URL (if query is not zero), read out the bit that's behind the ? and put it in page:

if (query)
{
	page = location.href.substring(query);
}

Now page contains the pagename behind the ? and if there's no ? (if the user simply goes to index.html) it contains the homepage. So all we need to do is write out the frameset and use page as the source of the content frame:

document.write('<frameset cols="200,*" frameborder=0 border=0 framespacing=0>');
document.write('<frame name="navi" src="navi.html" scrolling="auto" NORESIZE>');
document.write('<frame name="content" src=' + page + ' scrolling="auto" NORESIZE>');
document.write('</frameset>');

The only disadvantage of this method is that browser without JavaScript can't enter your site, but since all frame supporting browsers also support JavaScript I don't mind too much. Besides, my site is about JavaScript so I expect people to come here with a JavaScript browser.

Other situations

An other frequent situation is that you have a noframes homepage with lots of links to several content pages that should all open inside a frameset. This script can also be used for that situation.

Add the second script to the frameset page, so that you only have to supply it with a ?pagename.html for it to work.

var query = (location.href.indexOf("?")+1);
var page = 'YourDefault.html'
if (query)
{
	page = location.href.substring(query);
}

document.write('write your own frameset here');
document.write('<frame name="content" src=' + page + ' scrolling="auto" NORESIZE>');
document.write('write your own frameset here');

Then on the noframes homepage, simply call the frameset with the correct pagename behind the ?:

<A HREF="frameset.html?firstpage.html">The First Page</A>
<A HREF="frameset.html?directory/secondpage.html">The Second Page in another directory</A>

Home