links in frames

The full power of frames is exploited via the use of links. More specifically, a link displayed in one frame causing a file to open in another. This is a more straightforward task than you might think.

The first important thing is to ensure you have given your frames a name - via the name attribute in the <frame> tag. It doesn't matter (within reason) what that name is, as long as you reference it in the relevant link.

Link tags (whether <a> or <area>, image or text) that work in this way are just ordinary links in terms of the way they are formatted. They adopt whatever style is specified in the style sheet and they have an href attribute that specifies which file to open. What they do have s an additional target attribute. If you recall, we've already met this attribute on the page about opening new browser windows. Importantly, I showed you how you could use it to get links to open in named browser windows that could then be referred to by subsequent links.

Getting links to open in a named frame is exactly the same as getting them to open in a named browser window. Effectively, the frame becomes a "window" in its own right. You simply include a target="frame name" in the link. As an example, take this link, from the example page's menu bar...

<a href="ext_class1.html" target="right">class one</a>

"right" is the name allocated to that particular frame in the frameset document. Were there no such named frame, the browser would have opened ext_class1.html in a new browser window and called that "right". As it is, though, the named frame exists, so that's where the new file is loaded.

If you omit the target attribute from any link (which is, of course, the normal state of affairs) it will open in the frame in which the link is located. In the example, the link to ext_timetable.html from ext_description.html does not have a target attribute.

I've already mentioned one possible special target, that being _blank. Another one is very important here: _top. I render the following paragraph with plenty of emphasis to make sure you follow this advice...

If using frames, all external links should have target="_top" included!

What does this do and why so important? What it does is open the linked file in the whole browser window, superseding the frameset. It's the target you use when you've had enough of your frames and want to return to the un-framed world. It is extremely important that you remember to include target="_top" in all external links. Look at what would happen if I'd omitted it from the external links, then tried to use them (this is from an older version of this site, but the message remains the same):

I hope the reasons why this is such poor practice are obvious. Firstly you "trap" the browser inside your frameset, no matter how far out into the Web they then surf. Secondly - and there have been legal actions over this in some cases - you risk a plagiarism or breach of copyright charge, as it can look, from some angles, as if you're trying to make out the other site is somehow a part of yours. Avoid all complications, and follow the emphasised advice above.

There is another special link, target="_parent", which works by stepping up one level of nested frames. I've never had cause to use it, but at least now you know it's there.

One additional trick to bear in mind is how to get a link to change the contents of two frames at once. The following solution comes from Niederst's Web Design in a Nutshell, pp. 222-3, via http://www.webmonkey.com. The first solution is simpler, but only works if you want to change the frame in which the link is located along with the usual method of changing a second frame. Use target to update the different frame as usual, but add a JavaScript onclick event to update the current frame at the same time. In the example below, newcontent.html will open in the frame named "maintext", and newmenu.html will open in whichever frame the link text, "Click for update" is located (its exact name is irrelevant in this method):

<a href="newcontent.html"
      onclick="window.self.location='newmenu.html'"
      target="maintext">Click for update</a>

To open new content in two (or more) frames that do not include the frame in which the link is located, you need the following script in your document header. The italicised names need replacing with the names of the two windows in question. Note that "toolbarURL" and "mainURL" are not "dummy" names - OK, they don't actually have to be that, but they don't depend on information in the frameset. They act as "holders" for information passed to this script via the <a> tag, as you'll see.

<script language="JavaScript">
<!--
   function changePages (toolbarURL, mainURL)
   { parent.toolbar.location.href=toolbarURL;
     parent.main.location.href=mainURL; }
-->
</script>

Then, the <a> tag looks like this, where newtoolbar.html represents the new file to be loaded into the frame named "toolbar", and newmain.html... well I'm sure you get the point.

<a href="javascript:changePages ('newtoolbar.html', 'newmain.html');">

That's it! Do read the advice on using frames well sprinkled throughout the rest of this lesson, and remember, whilst navigation is not the sole use of frames - indeed, it's best to use them in much more sophisticated ways - it is links which really make frames work, whether these are strictly "navigation" links or not. So do be aware of how to make them work properly.

Back to the top

Back to the menu for lesson 10