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
index2l 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/index2l");
else
self.location.href = "http://www.kumquats.com/index2l";
//-->
</script>
</head>
<body>
Your browser apparently doesn't support JavaScript. Please
<a href="http://www.kumquats.com/index2l"> 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!