Frames 2: Linking and Attributes

How to link between frames, change frame attributes, and use the noframes tag

So, now you have a page with frames. But when you place a link inside a frame, the URL you linked to will only appear in that same frame! Doh! Well, this is because a link within a frame will default to showing the next page inside the frame the link is in. Wouldn't you like to have the link put the new page in another frame, or come up without any frames around it? The trick is to name each frame, and then specify the target frame in your link. Here is how to do it.

First, add the name="yourname" attribute to each frame, like this:

Now that each frame has a name, you can use either frames name as a target inside a link tag. So, let's say you had a link inside the left_frame (page1.htm). If you want the new page to show up in the right_frame, you need to add the target="frame_name" command to your link tag. The following example link tag will be in the left frame (left_frame), but make the output show up in the right frame (right_frame):

<a href="aboutme.htm" target="right_frame">About Me</a>

Now the left_frame will remain unchanged, while the linked URL will show up in the right frame! If you want to see the example at work, click here. You can link to any frame you want to this way, just remember to name all of your frames so you can target them.

Now, one of the most common problems is this: How in the great granny's uncle's step-dad's half-sister do I link to another page, but not have it show up in my frames? Well, it can't be done. Sorry... Just kidding. To make another page show up like it normally would, you need to set the target command in your link tag like this:

<a href="http://www.someplace.com" target="_top">See my friend's Homepage!</a>

target="_top"
Tells the browser to break out of your frames and display the new page by itself. Be sure you remember the underscore before the word top, or you could get really frustrated!

Now, here are some attributes you can add to your individual <frame> tags to help you control the design of the frames:

1. scrolling="no"
This command will let you specify whether or not you want a scroller on the right side of the frame for users to scroll down. If you don't add this command, the browser will decide whether or not to add a scroller based on the length of the page inside the frame. If set to "yes", the frame will always have a scroller. If set to "no" the frame will never have a scroller.

2. border="2"
Lets you specify the width of the frame border. Set it to any number you like.

3. resize="no"
This command lets you decide whether or not you want your viewers to be able to resize a frame by dragging the border across the page. If set to "yes", users can resize the frame. If set to "no", the frame cannot be resized. The default setting is "yes".

4. noresize
You may want to use this in place of resize="no", because not all browsers support the resize="no" command. Using both commands is probably a safe way to do it if you don't want to allow scrolling.

5. marginwidth="2" and marginheight="2"
These commands let you determine the margins between the frame and the contents of the frame.

Had enough yet? Well, there is one more thing you will want to know. How do I display something for people who don't have a browser that supports frames? Well, right before you close your last frameset tag, add this to your page:

<noframes>
<body>
<div>
Hi, your browser is really old. If ya wanna view this page, get a newer browser or click your back button.
</div>
</body>
</noframes>

Now users without newer browsers can see something, and decide whether or not to go to your alternate page (which they will, because you told them to go there, right?). Well, that about does it for now... so let's go on to the next section, Invisible Frames.