This is a sample content webpage you might have designed - one that might be possibly "found"
by a search engine user. Of course, the search engine may not know or show anything about your
<frameset> page. The JavaScript in the external file 'reframe.js'
fixes the problem. The JavaScript function 'reframeCheck()' checks to see if
the <frameset> page is the top window and if not, it automatically loads the <frameset> page. The
<frameset> page calls the JavaScript function 'reloadCheck()' that detects the message from the referring page and loads it in its proper
<frame>. Click here to download the pages in a ZIP file.
To see it for yourself, click here. The link points directly to the URL for a sample <frame> content page. As that page is loaded into the browser and before any content is displayed, the JavaScript will re-direct the user to the proper <frameset> page with the sample content page loaded into the intended <frame>.
The script in the <frameset> page works by examining the URL to check for the presence of code in the query string (ie. the information that comes after the question mark in the URL). Then it splits that message into two parts, the framed page's URL and its frame number, and loads everything into its proper frame without making the user jump through any links.
In this example, there are three frames. The top frame (numbered #2) which displays the top banner bar and the page name. The left frame (numbered #0) contains the navigation menu. And, finally, the frame for this page (numbered #1) which contains the main content pages in this simple common layout.
Installing this system on your site requires copying the JavaScript file and the code you'll
find on these pages into your pages and modifying it to match your site's file names. In the
JavaScript file 'reframe.js',
you need to change the settings of the variables 'wFrame0', 'wFrame1', and 'wFrame2'. 'wFrame0' is the
URL of the <frameset> page, 'wFrame1' is the URL of the page that you want loaded into
the <frame> with the name attribute set to 'menu', and 'wFrame2' set to the URL of the page
you want loaded into the <frame> with the name attribute set to 'content'. You also need to
set the value for the variable 'baseURL' to the URL for the directory where these pages reside
on your website.
On all of the other pages, you'll need to copy the JavaScript from the head section of one of the
framed pages here (for example, this page named 'reframe_main.html') into the pages of your site
that are designed to be contained within your <frameset> page. In the JavaScript for the
framed pages, set the variable 'framePage' to the URL of the <frameset> page, and set the
variable 'thisPage' to the URL of the current page, and set the variable 'frameNo' to the number of
the frame into which the page should be loaded. In the example here, frame number 0 is the menu
frame, and frame #1 is the main content page.
Purists will note that this scheme relies on the user having JavaScript enabled in their browser. Its just one of those things you have to accept when you have framed pages. Fortunately, the number of users who run with JavaScript disabled is low. There was a period not long ago when many users turned off JavaScript to avoid pop-up windows, but the proliferation of pop-up blocking software and the rising popularity of AJAX has greatly diminished that trend.
Please Note: In the end, I urge you to avoid using frames at all costs. The disadvantages to your website and to your users far outweigh any possible benefits. The search engines can read frames, and this system will help you mitigate the problems involved, but you'll still be putting out fires for as long as your site relies on frames. There are many simple HTML/CSS alternatives for your web design that will give you the same capabilities without the problems. See my No Frames Navigation System for some ideas to help you replace frames and easy ways to remove frames from your existing web design.
This page Copyright (C) 2003-2011 by Richard L. Trethewey, Rainbo Design Minneapolis. All rights reserved.
Comments or Questions?