Designing with Frames - an Introduction

Advanced Issues

For those of you who are especially curious, or for those who already have a good knowledge of frames, but would like to learn a fancy trick or two, this section covers two advanced frame techniques. The first covers probably the most frequently-asked question in the world of frame design: "How do I make one link change two frames?" The second is a clever trick that allows you to avoid writing many little HTML files to fill in simple and repetitive frames.

Both of these techniques require a certain understanding of JavaScript, but I'll explain everything from the ground up. Anyone with a basic understanding of programming concepts should have no problem following along.

Multi-Frame Links

So, you've been scribbling rectangular boxes on Post-It notes all day, and you've finally come up with the ultimate layout for your new site. You sift through the crumpled yellow squares covering your desk to find your mouse, and pop open your editor. As you stare at the screen, you come to a sudden, horrible realization. For your layout to work, you're going to need to make one link change the contents of two frames.

Are you sunk? Of course not! Enter JavaScript. Using this simple language, we will change our link so that instead of loading a file into a frame, it will trigger a little piece of JavaScript that we have set aside, having defined it in the heading of our file. This piece of JavaScript is called a function, and will do the tricky job of changing several frames at once. More on this in a moment.

Before we go any further, let me say that the technique described here will work for all Netscape browsers, as well as for Internet Explorer 4.0. Users of Internet Explorer 3.0 will be unable to properly access your site if you use this technique, so be sure that you weigh your options to decide whether multi-frame links are really worth it.

In case you're new to JavaScript, let me describe how this clever language works. JavaScript is what is commonly referred to as an object-oriented programming language. In simple terms, this means it thinks of everything in terms of objects. Your Web browser is an object, the browser window is an object, the images in your Web pages are objects, and your frames are objects! The nice thing about objects is that you can change things about them. Things that you can change in a particular object are known as that object's properties.

One of the properties of the object representing the browser window (the window object) is the document. As it turns out, the document is an object as well (didn't I tell you everything was an object?). One of the properties of the document object is its location. This location is the URL of the document currently displayed by the window.

"What's this have to do with my problem with multi-frame links?" you ask. Well, as I've already said, you can change the properties of objects. So what happens if you change the location property of the document of one of your frames? Well, the frame loads the new URL, naturally. And in JavaScript, there's nothing to stop you from changing as many properties of as many objects as you wish!

Let me start by showing you the JavaScript involved in changing the contents of a single frame.

parent.frames["name"].document.location = "newdoc.html";

Where name is the name of the frame you want to change, and newdoc.html is the filename or URL of the new document to be loaded into that frame. This is the JavaScript way of saying:

Okay, so you now have a really fancy way of doing what you already know how to do. How do you change the location of more than one frame? Well, you just repeat that line of JavaScript for each frame you want to change.

parent.frames["frame1"].document.location = "newdoc1.html";      
     
parent.frames["frame2"].document.location = "newdoc2.html";      
     
...

So, where does all this fancy JavaScript stuff go, exactly? Well, as I mentioned, each of your links is going to trigger a little piece of JavaScript called a function. You define functions in the heading of your HTML file, inside a <SCRIPT> tag.

<HTML>      
<HEAD>      
...      
<SCRIPT LANGUAGE="JavaScript">      
<!-- Hide from older browsers      
function speciallink() {      
parent.frames["frame1"].document.location = "newdoc1.html";      
parent.frames["frame2"].document.location = "newdoc2.html";      
}      
     
// -->      
</SCRIPT>      
</HEAD>      
...

In the above example, we've defined a JavaScript function called speciallink(), which changes the contents of two frames. All that's left now is to trigger that function when the user clicks on the correct link.

All this requires is a fancy form of the <A HREF> tag we all know and love:

<A HREF="javascript:speciallink()">...</A>

We call this a JavaScript link. This simply tells the browser that when the link is clicked, it is to run the JavaScript function called speciallink(), which, as you know, is defined in the heading of the file.

It is important not to use the TARGET attribute of the <A> tag when using this technique. Remember, you have multiple "target" frames in this case, and they are already being specified in the JavaScript function. If you were to use the TARGET attribute, your browser would look for the JavaScript function in the TARGET frame you specify. In some special instances, you might want to do this, but for our purposes this is something to be avoided. For the same reason, be sure not to use the <BASE TARGET=...> method of specifying the default target frame in a document with JavaScript links.

So to sum it up, for each link that you want to change more than one frame, create a JavaScript function that makes the required changes. Then, point to that function with a JavaScript link.

As an example, consider the sample frame-based site we built in the previous section. At the top of each page, we had a title in large print which corresponded to the section of the site you were in (Products, Ordering, Customer Support, etc.). What if we wanted to place that title in its own frame at the top of the page, so that when the user scrolled down, it would remain visible? Whenever the user clicked on a link on the menu, we would have to change both the title and the main page.

This is easy to do with the new techniques we've learned. Here is our modified example:

If you're going to use this technique on a large scale, you may want to invest a little time into learning more about JavaScript. Imagine, for example, that your site had five main sections, each with multiple subsections, and you wanted to be able to handle multi-frame links not only in your menu, but also in the main pages. You would have to write an incredible number of JavaScript functions, and repeat them in the heading of almost every HTML file in your site.

With a good knowledge of JavaScript, it's possible to do things like sharing a single, multi-purpose function between all your frames and HTML files. Thus, you could cut down greatly on the amount of code required for implementing this technique across a large site. The simple technique I've demonstrated here will work perfectly on a small, personal site though.