You've created a beautiful page that's laid out perfectly. Unbeknownst to you, someone has linked to your pages from within their framed layout, but failed to add target=_top to the <a> tag pointing to your pages. When a visitor to their site tries to get to yours, the pages appear within their frames, ruining your great layout!
What to do? The general idea is to "frameproof" your documents. This guarantees that your pages will break free of any containing frames, regardless of how they get loaded.
A JavaScript solution
Now I must confess that it's not possible to frameproof your documents using only HTML. For true protection, you'll need to use either a bit of JavaScript, as we'll see shortly, or use a feature of HTTP, as described below.
The JavaScript method is fairly straightforward. Using JavaScript, you can determine where in the frame hierarchy your pages are being loaded. If the window containing your pages is the same as the top window of the browser, you are not trapped in a frame. If your window is different, though, you're in a frame and need to do something about it.
The simplest way to check that your window is the top one is to use this snippet of code:
if (self != top)
If your window (self) is not the top window, you're in a frame.
Once trapped, how do you get out? Again, this is easy-redirect the contents of the top window to be your location. This effectively reloads the top window with your pages, stopping the loading of your page into a frame. You can do this with this bit of code:
top.location = self.location;
Putting this all together, the complete JavaScript code to escape a frame is
if (self != top) top.location = self.location;
You can include this in the <body> tag of your document using the onLoad attribute. This attribute defines a JavaScript routine to run when the page begins loading, which is just the right time to detect and correct a frame problem. Your <body> tag will look something like this:
<body onLoad="if (self != top) top.location = self.location;">
This works great if your document is a regular document, but won't work if your document is a framed document. In these cases, you can place the JavaScript directly in your document using the <script>:
<script language=JavaScript>
<!--
if (self != top) top.location = self.location;
// -->
</script>
This actually works in any document, framed or not, so you might want to consider using it in all of your documents as a boilerplate to avoid being captured by frames.
Exploiting HTTP
Another way to avoid frames which doesn't require scripting is to take advantage of the window-target field in the HTTP header that precedes your document when it's sent by the web server. HTTP is the HyperText Transfer Protocol, the standard that defines how a document is transmitted from server to a browser. At the beginning of every transmission are a number of header fields that tell the browser what to expect. If the window-target field is present, it tells the browser the name of the window in which to load the new document. By setting the value to _top, the browser will eliminate any frames and load your document into the top window.
You can set this header field by either modifying your server to include it for the appropriate pages, or by adding it using the <meta> tag in your document head. Try adding this to your document for the desired effect:
<meta http-equiv="Window-target" content="_top">
Moving on...
This concludes our series on frames. Next week, we'll begin an extended series on style sheets, opening the door for all sorts of layout control that's otherwise impossible in standard HTML.
Previously in Tag of the Week:
Inline frames
Basic Target Behaviors
Linking Between Frames
