The Frame Game

by Joe Gillespie — Feb 1, 2000

by Joe Gillespie

Ah, frames. You either love them, or you hate them!

Although the concept has been with us for some time, there are people who use them quite happily and others who, hands raised, back away in mortal fear.

One of the main excuses for not using them is that some browsers can't handle them. That may have been true in the past, but those browsers are in such a minority now they can be safely ignored - unless, of course, you know that a significant proportion of your readers are using old browsers or surfing on mobile phones!

Then there are people who don't really understand frames and made an utter mess of designing a framed site. Admittedly, it takes a little more skill, knowledge and effort to produce a successful framed site and if you do feel the need to produce a parallel <noframes> site as well, it will ultimately cost the client more.

Used well, frames should be unobtrusive. If you are aware of them, then there is probably something wrong. You've seen those sites where the window has horizontal and vertical scrollbars on every frame and ones which recurse on one another so that you get frames within frames within frames... These things shouldn't happen, it just takes a little understanding.

Just like tables, the borders of frames are best hidden in most instances. Borders are like the scaffolding on buildings, fine during construction, but should be removed when the work is done. Table and frame borders have a utilitarian look about them making the pages look 'homespun' and unprofessional.

Scrollbars are necessary when a page's content overflows the frame but if you are in control of your design efforts, you should try to keep visible scrollbars to the absolute minimum. Apart from cluttering the look of the screen, they nibble away at that most precious commodity - screen real estate. If you switch-off scrollbars, you are effectively fixing the frame size and anything inside it that doesn't fit will be clipped. Just remember that text changes in size from one user's machine to another depending on their platform, browser and personal preferences. Graphic images are always a predictable, absolute pixel size. If you put only graphics in frames, there is little chance of accidental overflow. If you put text in a frame, you can, at least, restrict its width using a table - so you only get a vertical scrollbar.

Frames offer several advantages to designers.

The basic concept allows some frames to remain static whilst others change. You might, for instance, want a common top 'banner' frame and a side navigational frame on every page and only one 'content' frame which changes. Providing that you get your 'frameset' right to start with, this is good from the user's point of view as it simplifies navigation and usability.

Using frames also has the major advantage of allowing you to pass JavaScript variables from one page to another. The only other way to do this is to use cookies, but the general paranoia about infringement of privacy means that many people switch off the acceptance of cookies leaving your efforts high and dry.

For most purposes, it is only necessary to have two or three frames. Each individual frame requires a separate HTML file and these are all choreographed and stage-managed by a master page called the 'frameset'. The 'frameset' specifies the position and size of the frames and the names and locations of the HTML files that will initially occupy those frames. It can also specify what happens when the browser doesn't support frames by using the <noframes> tag.

Here is a summary of the advantages and disadvantages of frames.

Frames Advantages

  • Allows you to separate constant navigational and identity elements from the variable content.
  • Navigation and constant element don't scroll with the main page.
  • Having to update only part of the browser window means less data to transfer, making better use of bandwidth.
  • Readers can print the content page without getting the navigational elements.
  • You can store JavaScript functions in a constant frame and call them from other frames - again saving bandwidth.
  • Lets you pass JavaScript variables from one page to another which, is difficult to do without using cookies on non-framed sites.
  • Done properly, looks more professional.

Frames Disadvantages

  • Some older browsers can't handle frames. Traditionally, sites with frames have also provided a <noframes> version, although this is not quite so important nowadays as the vast majority can.
  • Providing an alternative <noframes> version of a site takes extra time and effort costing more both initially, and for upkeep.
  • You can only bookmark the main frameset page, not individual frames.
  • Search engines won't index your framed pages.
  • The browser's Back and Forward buttons can get out of sync if more than one frame is updated, which can cause confusion.
  • It takes considerably more skill to create a famed site, especially where JavaScript is concerned.
  • Netscape and Microsoft Internet Explorer handle frames differently so the individual frames will be in slightly different sizes and positions. Netscape has a tendency to 'clip' some frames regardless of the frame specifications.

I don't intend giving a full tutorial on the use of frames, there are plenty of those on the Web already and I would highly recommend David Flanagan's book 'JavaScript - The Definitive Guide' (O'Reilly). But here's a little fun thing about frame relationships.

One Parent Family

It's a sunny day. There are three children in a park, a girl and two boys. One is sitting reading a book. One is bouncing a ball. One is running around flapping arms and screaming like a mad thing. There is no obvious sign of adult supervision yet they are all behaving as if there is someone not far away.

Meet the Frames family.

And sure enough, there's Mama Frames sitting on a park bench over there with one eye on a magazine, one on her handbag and one on the kids.

The girl runs over to Mama Frames and says, "Tell Johnny to stop throwing that ball at me." And Mama Frames chastised little Johnny accordingly.

"And tell old snotty-nose Martha that's she's a wimp", comes the impudent reply.

This is an example of frames communicating with one another via a parent. The children are siblings of the parent so if parent.frames[0] is the mother, the kids are parent.frames[1]. parent.frames[2] and parent.frames [3]. Or, they could be referred to by their names - parent.frames["Johnny"], parent.frames["Martha"], parent.frames["Oswald"] - (Why are readers always called Oswald?). Or, instead of using the array style, having defined the frame name attribute, you can simply refer to - parent.Oswald - a bit like Chinese names where the family name comes first.

In a framed Web page, the frames are just an array relative to the Window object. You can refer to the frames by number or name, and just like our family, the Mama Frames (parent.frames[0]) is in the background. If any of your frames want to communicate with one another, they do so in relation to the parent frame.

Mama Frames
parent.frames[0]
Johnny Frames Martha Frames Oswald Frames
parent.frame[1] parent.frame[2] parent.frame[3]
or or or
parent.frame["Johnny"] parent.frame["Martha"] parent.frame["Oswald"]

For instance. to give Oswald some new content you would say:

parent.frames["Oswald"].location="newpage.htm"; or parent.Oswald.location="newpage.htm";

or to address a variable (var nose="";) on Martha's frame from Johnny's frame, it would be:

parent.Martha.nose="snotty";

You can now appreciate why Pop Frames disappeared several years ago and has never been seen or heard from since.

Kids - You can't live with them and you can't live with them!

Del.icio.us Digg Technorati Blinklist Furl reddit Design Float