WebReference.com - Part 2 of Chapter 6 from Designing with JavaScript (3/4)

Designing with JavaScript, 2nd Edition

The single-frame method

With the single-frame method, a script detects the
browser type, creates a single frame for the user, and displays a page with content appropriate
for that browser inside the frame.

If you use a lot of browser-specific features on your site, you may want to use
totally different pages for different browsers, especially if you're employing features that
significantly affect the layout and function of your pages. If this is the case, the single-frame
method is for you. With the single-frame method, a script detects the browser type, creates a
single frame for the user, and displays a page with content appropriate for that browser inside
the frame.

The single-frame method is the easiest and most reliable way to direct different
browsers to different pages. It is also transparent: because it uses a single frame, the user
doesn't see any frame borders, just the page. Thus, for instance, a page full of ActiveX controls
and other IE-related technologies can be kept "safe" from Navigator with this method. If the user
is running Navigator, she can be shown a page that doesn't contain any IE-specific content.

If your web pages make heavy use of DHTML, you may want to consider using the
single-frame method. In this example, we direct users of IE 4 and later to a page that makes
extensive use of Microsoft's implementation of DHTML. For Netscape 6, we use a page that supports
DHTML based on the W3C-standard DOM, since Netscape 6 (mostly) supports the standard DOM. Users
of Netscape 4 are directed to a page that provides limited DHTML functionality, as supported by
that browser. For any older browsers, users are directed to a page that doesn't use DHTML at all.
The full HTML is shown in Example 6-7.

You may be wondering: "Why not just direct
browsers to different pages using window.location?" The reason is what I call the back-up
black hole. If you create a special page to direct browsers to browser- specific pages, when a user
presses the Back button from any of those pages, he will be directed right back to the referring
page. This is quite unprofessional and can confuse your visitors.

The JavaScript code resides in the head of the document that defines the single
frame. First, the browser's name and version are determined. There are three cases that we care
about: Netscape 6 or later, Navigator 4, and IE 4 or later. These correspond to the values
"nn6up", "nn4", and "ie4up" for the browser variable. If the user isn't using one of these
browsers, the browser variable is not set.

Next, a single frame is created for each browser type. If the browser is IE 4 or
later, the script creates a single frame that displays ms_dhtml.html (the page
that uses Microsoft's implementation of DHTML). If the browser is Netscape 6 or later,
the script creates a frame that displays dom_dhtml.html. And with Navigator 4, the
frame displays nn4_dhtml.html. Since we aren't redirecting the browser to a
different page, but instead creating a single frame for each page, all of this is transparent
to the visitor.

What about the frame borders? Not a problem. When the frameset is created, the first
row is set to 100% and the second to nothing. Therefore, when the single frame is defined, it will
take up the full browser window. Surprisingly, leaving out the second frame does not result in
any adverse effects. There's another advantage to the single-frame method: since you're using
frames, though only one, you now have the ability to set the margin height and width for your page.

Setting target to "_top" in the base element ensures that
any links that aren't specifically targeted to a frame or window are loaded in the top-level browser
window.

When using this method, it is advisable to include the following line in the head of
your HTML documents:

<base target="_top">

This bit of HTML ensures that any links that aren't specifically targeted to a frame or
window are loaded in the top-level browser window.