Frames Yes! Frames No!

By Joe Burns

...use these to jump around or read it all

[No Frames] [Yes Frames]

     Frames, frames, frames. You either love them or hate them. Either way, you have to deal with them. Maybe you won't write them to your pages, but others do.

     One of the most popular formats of Web page design is that two-column, seamless-frame look. I have a tutorial on it here. Although I'm not a fan of frames myself, I do like this look when done correctly. You get a nice row of buttons down the left-hand side that controls what comes up in the right hand frame. It's a good look as long as the author only puts pages built for the format into that larger frame. But that doesn't always happen.

     Often authors want to never allow people to leave their site, so they "lock" in the user by making it so that all pages open in that right hand frame window unless the user makes a point of leaving the frame system altogether. You can imagine what that does to the look of some pages. They get scrunched into a smaller space than what they were built for and just look terrible.

      On the other hand, I'm often asked how to keep page in a frame format. Users are pretty knowledgeable now about looking at source code and isolating a page outside of the frame setting it was built for. That's just as bad as scrunching a page down to fit in a smaller space that it was built for.

     Here I'm going to give you the code for disallowing your pages to appear in frame windows and disallowing your pages to appear without being set into a frame window.

     First, getting out...

No Frames!

     This one's pretty simple. One line of JavaScript in the BODY tag will do the trick. Here's the format:


Here's what's Happening

  • This is a conditional statement (note the "if") that checks for a frame format.
  • The line parent.frames.length!=0checks to see if there are frames.
    • parentis the top level window, the one you're looking at.
    • framesdenotes that frames are involved.
    • lengthis a count of the number of frames.
    • !=0 is JavaScript for "not equal to zero".
  • Moving along, top.locationsets up a hypertext link to refill the top location, the browser screen you're looking at.
  • pagename.html should be the name of the page this JavaScript is sitting on. Thus, the line of code reloads itself into the top level window.

     Put that code into your HTML document's <BODY> tag, and as long as the browser understands JavaScript 1.0, which almost all browsers do, the page will not allow itself to sit within a frame format.

     Sit tight, we'll get to an example in a moment.

Yes Frames!

     So you've got a page that you want to be sitting in frames. Maybe some code won't work without a frame to target, or you just simply like the look. Well, here's the code to stop people from taking your page out of a frames format:

Click for the Code

     This code sits after the <BODY> tag before any other text.

     The code is, again, a conditional statement. The first line asks if the page, self, is equal to, ==, the top level page, parent.

     If it isn't, meaning it is opening in a frame window, then nothing happens and the page loads as it normally would. But if it is the top level window, then three lines of code are written to the page using document.write() statements.

     The first line simply alerts the use that the page is a frame element. The second tells the user he/she will be taken to a frame page in a second. The third line is a basic META REFRESHthat loads the frame window.

     I have this written in a very basic format. Here are a couple of things to make it better:

  • You can jazz up the text anyway you want.

  • If you set the META REFRESH to zero rather than 1, then the change will be almost instantaneous and the user might never see the text.

  • You may want to put a link to the frame page in one of the lines of text in case the user's browser doesn't understand the META command.

  • Yes, I could have gotten this effect by using the same JavaScript linking method as was used in the previous "No Frames!" example, but I thought this was a little more efficient.


     OK! I have a two-window frame page set up. The page that appears in the top frame offers a link to a page that will not allow itself to appear in a frame setting.

     The page that appears in the bottom frame window has a link to a page that will not allow itself to appear outside of a frame setting.

     No tricks. Feel free to look at the code. There are no targets, just the JavaScript that I showed you here.

     HINT: You may want to do the one on the bottom first, when a page opens in a window by itself using this code, your back button doesn't work real well. The page just keeps opening itself up. You'll need to right click on the BACK button to get your history list, then choose the tutorial. It'll be clearly marked.

See the Examples

That's That!

     OK, you decide. Do you stay in a frames setting or do you get out? Your choice. Now no one can force you.



[No Frames] [Yes Frames]

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
Thanks for your registration, follow us on our social networks to keep up-to-date