17.5 Tricks with Windows and Frames

17.5 Tricks with Windows and Frames

For the vast majority of links in your documents, you'll want the newly loaded document displayed in the same window, replacing the previous one. That makes sense, since your users usually follow a sequential path through your collection.

But sometimes it makes sense to open a document in a new window, so that the new document and the old document are both directly accessible on the user's screen. If the new document is related to the original, for instance, it makes sense to have both in view. Other times, you might want to open more than one document in multiple windows in a frameset. More commonly, the new document starts the user down a new web of documents, and you want her to see and remember where she came from.

Regardless of the reason, it is easy to open a new browser window from your document. All you need to do is add the target attribute in the appropriate hyperlink (<a>) tag.

17.5.1 Targeting Windows

We normally use the target attribute to load a document into a specific frame that we've named in a frameset. It also serves to create a new window, by one of two methods:

Reference a new name: If you use a name you haven't previously defined as the value for the target attribute of a hyperlink, Netscape and Internet Explorer automatically create a new window with that name and load the referenced document into that window. This is the preferred way to create new windows, since you can subsequently use the name to load other documents into the same window. Using this technique, you can control which document gets loaded where.
Create an unnamed window: Some browsers, like Netscape and Internet Explorer, support a special target named _blank^[4] that lets you create a new window. The _blank window has limited use, though, because it is nameless — you cannot direct any other documents into that window. (New documents loaded via hyperlinks selected by the user within the window get displayed in that same window, of course.)

^[4] Some browsers also accept the name _new. If you can't get _blank to work with your browser, try _new.

17.5.2 Overriding Others' Targets

Ever visited a site whose home page is a frame document that never gives up? You know, the kind that leaves its great big logo on the top of the window and its site TOC running down the side of the display, staring you in the face long after you've hyperlinked away from the site? What if your site's frameset gets trapped into one of their window frames? What to do? (Apparently their webmasters haven't heard about the _blank target.)

The short answer is to use JavaScript to force open a new window for your documents. But that, too, is potentially confusing for users, since they may already have a full window ready for your document. So, to embellish, let JavaScript discover whether your page is destined for a corner frame or for the whole window.

Here is an example script that loads a web page called index2.html into its own full window. Note that JavaScript-enabled browsers won't let you clear a previously loaded document display unless your document owns it. So, in the case where the target is not the whole window (i.e., "self" is not "window.top"), the example script opens a new window that becomes the target for your pages. The user may choose to close your document window and return to the other one, or vice versa.

<html>
<head>
<title>I need a window of my own</title>
<script language="JavaScript">
<!-- 
  if (self != window.top) 
      window.open("http://www.kumquats.com/index2.html");
  else
    self.location.href = "http://www.kumquats.com/index2.html";
//-->
</script>
</head>
<body>
Your browser apparently doesn't support JavaScript. Please
<a href="http://www.kumquats.com/index2.html"> hyperlink to our site manually.</a>
</body>
</html>

17.5.3 Multiple Frames in One Link

Loading a new document from a hyperlink is a snap, even if you put the new document into an alternative frame or window from its hyperlink parent. Occasionally, though, you'll want to load documents into two frames when the user clicks just one link. With a bit of trickery, you can load two or more frames at once, provided they are arranged a certain way in the browser window.

Consider this frame layout:

<frameset rows=2>
  <frameset cols=2>
    <frame name=A>
    <frame name=B>
  </frameset>
  <frameset>
    <frame name=C>
    <frame name=D>
  </frameset>
</frameset>

If someone clicks a link in frame A, the only thing you can do is update one of the four frames. Suppose you wanted to update frames B and D at the same time?

The trick is to replace frames B and D with a single frame, like this:

<frameset cols=2>
  <frameset rows=2>
    <frame name=A>
    <frame name=C>
  </frameset>
  <frame name=BD>
</frameset>

Aha! Now you have a single target in which to load a single document, frame BD. The document you load should contain the original frames B and D in one column, like this:

<frameset cols=2>
  <frame name=B>
  <frame name=D>
</frameset>

The two frames fill frame BD. When you update frame BD, both frames are replaced, giving the appearance of two frames being updated at once.

The drawback to this is that the frames must be adjacent and able to be grouped into a single document. For most pages, though, this solution works fairly well.

We've only scratched the surface of HTML and XHTML tips and tricks here. Our advice: keep hacking!