Tutorial: Re-framing frames.
I love developing (and viewing) websites that use frames. Sorry, I just can't help it. When used effectively I find framed sites can look very professional, and are very effective in keeping the site name and navigation details visible at all times.
Frame sites are not without their challenges, however. Developers of framed pages live in fear of a surfer inadvertently opening a page belonging to your frameset WITHOUT the rest of the frame's pages around it. When this happens surfers can find themselves staring at a page with little or no content, and certainly no context as to how your site is actually supposed to look.
Great news! This can be overcome very easily using some very simple JavaScript.
Version "A".....
Paul McFedries, author of A Complete Idiot's Guide to Creating a Web Page offers a re-framer script here: http://www.mcfedries.com/JavaScript/reframer.asp
When would you use THIS version?
Glad you asked! If a user calls up a page that should appear in the frameset, their browser will construct the frames "on the fly" and display the selected page exactly where it should be. It will not force the user back to the home page, instead it will show the nominated page surrounded by the usual frameset. This script (Version "A") is ideal for content pages, while Version "B" (further down this page) is better suited to other pages appearing within the frameset such as menu bars etc.
This script takes some configuration, so to help this is what I did:
STEP 1: This goes on the <frameset> page in between </head> and <body>
<script type="text/javascript">
<!--
var frameSRC
if (location.search)
frameSRC = location.search.substring(1)
else
frameSRC = "home.html"
document.write('<FRAMESET ROWS="81,*">')
document.write('<FRAME SRC="navigate.html">')
document.write('<FRAME SRC="' + frameSRC + '" NAME="lower">')
document.write('</FRAMESET>')
//-->
</script>
STEP 2: This goes on each page belonging to the frameset, in between </head> and <body>
<script type="text/javascript">
<!--
if(window.top==self) {
var parentURL = "index.html"
var childURL = window.location.href
var reframeURL = parentURL + "?" + childURL
location.href = reframeURL
}
//-->
</script>
To explain the first piece, my top row in the frameset was 81px, the rest whatever...... The top frame was always called navigate.html, while the name of the lower frame was "lower". For more details about configuration, be sure to check out Paul's page (link above).
Version "B".....
While the above script worked great for me it was pretty complex, then I saw a simpler one (with a lot of other good information) at http://www.searchenginewatch.com/webmasters/article.php/2167901
When would you use THIS version?
Glad you asked! Unlike Version "A", this script does not construct frames on the fly. Instead it tells the browser "Whoa, not so fast!" and forces it to load the full frameset page (index.html in this example), regardless of the page that was selected by the user. This makes the script useful for pages that are not standard "content" and belong elsewhere in your frames, such as menu bars and headers.
<script type="text/javascript">
<!--
if (top == self) self.location.href = "index.html";
// -->
</script>
This script needs no real configuration and goes in between the </head> and <body> tags in every page. In this example "index.html" is the frameset page. Hard to go wrong, really.
If you found this brief little tutorial helpful, I would love to know. Please drop me a line from my page at http://www.garybadger.com/.
Cheers,
When the working day is over and Gary returns home from his day job, he develops websites for small businesses as well as for his own amusement. Living in Sydney Australia, Gary is a regular visitor to HTMLfixIT and credits Franki and Don for their wonderful resourcefulness "when the going gets tough".
