Some problems with HTML frames - Page 1

When copying the code from these pages remember to paste them first into a text only editor such as Notepad and then copy and paste from there into your webpage. This is so that all the text formatting codes can be removed from the copied text. Remember that your HTML editor must be in code or HTML view when you paste the code into it. If you are using a template driven HTML editor then the code must be pasted into an HTML and not a text box. JavaScript must be enabled in your browser for the effects generated by it to be seen. The code on this page was tested in IE 6.0.29; Mozilla 1.7.3; Netscape 7.2 and Opera 7.54

In June 2003, Lycos UK, one of the free hosts I use, started adding a Google ad-frame to their hosted sites. Not only does this spoil the look of the page (you get used to it) but it also causes problems for the visitors browsers. HTML frames have their uses, but they have several inherent problems. These problems may not be apparent to the author but they most certainly are to their visitors. This page was designed to highlight some of the problems that frames cause and what can be done about them.

While you are viewing this page, you may like to view and compare my site with the forced ad-frame from Lycos and from my own server, without the ad-frame. This page isn't just about the problems with the Lycos/Google ad-frame and so I created a frame page of my own, to see what these problems look like and if the solutions I offer here actually work.

1) You cannot go directly to a bookmark on a page by typing the full URL in the browser address bar. If you try this then the main browser window is empty and only the ad-frame shows.

This particular behaviour seems to be an artifact of the Lycos/Google ad-frames, and as far as I know, can't be remedied by the author or their visitors.

2) Not all hosts accept frames. This seems to mainly apply to free hosts, where the code they add to the pages to display their adverts interferes with the way that frames work. Some hosts are clever enough to only add the adverts to the main page, others add the adverts to all the pages they serve. Lycos UK used to be terrible, the Lycos/Google ad-frame was added to all pages served, but they've now amended the code they use. Even using multiple framesets their adverts only appear once on the page.

3) Every page shows the same URL, the one that you entered the site on. This is mostly the result of bad coding practices, there is no need for this to happen.

What usually happens is that a simple frame definition document is created. framset1.htm is such a document. The main code in this file is...

<frameset cols="20%,*">
<frame name="menuefrm" src="frmmenu1.htm">
<frame name ="mainfrm" src="frmmain1.htm">
</frameset>

The controlling line in menu1.htm in this example is <base target="mainfrm"> in the HEAD section. This line of code tells the browser to open the links in the frame named mainfrm.

A far better way is to define the frames for each main page that is used. To demonstrate this take a look at framset2.htm

Here's what is happening.

framset2.htm contains the following code...

<frameset cols="20%,*">
<frame name="menuefrm" src="frmmenu2.htm">
<frame name ="mainfrm" src="frmmain1.htm">
</frameset>

The menu, frmmenu2.htm contains the following lines of code...

<p align="left"><font size="4" color="#0000FF"><a href="frmset2.htm">Home Page</a></font></p>
<p align="left"><font size="4" color="#0000FF"><a href="frmset2a.htm">Example Page 1</a></font></p>
<p align="left"><font size="4" color="#0000FF"><a href="frmset2b.htm">Example Page 2</a></font></p>
<p align="left"><font size="4" color="#0000FF"><a href="frmset2c.htm">Example Page 3</a></font></p>

As well as<base target=_top> in the HEAD section of the page. This is there to ensure that a complete new page is opened, and that the pages don't open in any frame.

As you can see the menu doesn't open a new page, but a new frame definition page. These are basically the same.

Here's the code for framset2.htm ...

<frameset cols="20%,*">
<frame name="menuefrm" src="frmmenu2.htm">
<frame name ="mainfrm" src="frmmain1.htm">
</frameset>

Here's the code for framset2a.htm ...

<frameset cols="20%,*">
<frame name="menuefrm" src="frmmenu2.htm">
<frame name ="mainfrm" src="frmmain2a.htm">
</frameset>

Here's the code for framset2b.htm ...

<frameset cols="20%,*">
<frame name="menuefrm" src="frmmenu2.htm">
<frame name ="mainfrm" src="frmmain2b.htm">
</frameset>

And here's the code for framset2c.htm ...

<frameset cols="20%,*">
<frame name="menuefrm" src="frmmenu2.htm">
<frame name ="mainfrm" src="frmmain2c.htm">
</frameset>

The only part that changes in these frame definition pages is the name of the file being called as the main page. These files are around 1kb in length and are easily created by copying and pasting. The great thing about using this method is that it works and solves a lot of other frame related problems.

For example, suppose you want to give the URL of one of your pages. You can't give a main page as the other frames, possibly one containing your site's navigation page, won't load. What you can share with people is the individual frameset page. This way, all the frames will load as they should.

Much of the code above come from, or was adapted from Slarti's Homepage.

4) Because of 3) the browsers back and forward navigation buttons no longer work properly.

Again, this seems to have been an artifact of the Lycos/Google ad-frame and now seems to have been resolved.

5) Because of 3) the browsers refresh button does not work properly.

This is easily resolved by using separate frame definition pages as detailed in 3) above.

6) Because of 3) the page cannot be easily added to the users favourites.

Again, this is easily resolved by using separate frame definition pages as detailed in 3) above. There are some sites, such as Internet Related Technologies, that use a lot of JavaScript to accomplish the same thing, but the method outlined above seems far easier to implement.

IE 6.0.29 on Windows XP with Service Pack 2 seems to not suffer this problem. Using IE, frmset1.htm and frmset2.htm both seem to the entire frameset information saved. For example, if frmset1.htm is opened, then the link for Example Page 3 is clicked, then later returned to, the proper page in the frameset is opened, even though URL in the address bar was frmset1.htm. The same can't be said for Mozilla 1.7.3, Netscape 7.2 or Opera 7.54 which all still saves the page that is in the URL in the address bar. All save the pages properly using the code in 3) above.

The only major problem using the methodology outlined above is if one of the frames contains data or a format that needs to be kept no matter what happens in or to the other frames. For example, if the site's navigation menu were one of the kinds that can be controlled by the user i.e. expanded or closed, then when it was reloaded with the new frameset page it would go back to its default state.

7) Links open inside the frame.

Image of the Microsoft site with the Lycos/Google ad-frame still there

This is wrong, external links should not be opened in your own frames. Most people spend a lot of time designing their sites. They don't want their work in your frames anymore than you want yours in theirs. People may not realize that you're displaying someone else's work on your own pages and if the site you've linked to also uses frames, the visitors screen will start to look a mess. Care should also be taken that you don't show your own frameset inside one of your own frames.

frmsetlnk.htm shows some of the problems and some solutions.

Probably the most useful of the examples on frmsetlnk.htm or frmmainlnk.htm are target=_top and target=_blank. Target=_top opens the link in the current window, regardless of the frames already there. Target=_blank opens the link in a new browser window.

<a href="http://www.siteURL" Target="_top">Link to new page or site</a>

<a href="http://www.siteURL" Target="_blank">Link to new page or site</a>

You can specify that all the links on a page without a target attribute open with either top or blank by using the following lines of code in the HEAD section your pages.

<base target="_top">

or

<base target="_blank">

You can leave out the quotes from the above code, it will still work. Opera 7.54 does not seem to obey any of these instructions in the page HEAD, the other browsers I tried did.

The base target is a global feature but can be overridden in individual links. For example, if the HEAD section contained <base target="_top"> but a link contained target="_blank" then the target in the link would be obeyed and the page would open in a new window.

Similarly, if the HEAD section contained <base target="_blank"> but a link contained <base target="_top"> then the page would open in the current browser window.

 

This page created 25th October 2004, last modified 3rd February 2007

GoStats stats counter