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

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

To page 1To page 2current pageTo page 4
[previous] [next]

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.

<html>
<head>
<title>A Smart DHTML Page</title>
<base target="_top">
<script language="JavaScript">
var browserName = navigator.appName;
var browserVersion = parseInt(navigator.appVersion);
var browser;
if (browserName == "Netscape" && browserVersion >= 5) {
    browser = "nn6up";
}
else if (browserName == "Netscape" && browserVersion == 4) {
    browser = "nn4";
}
else if (browserName == "Microsoft Internet Explorer" && 
         browserVersion >= 4) {
    browser = "ie4up";
}
// Frame for IE 4 or later with Microsoft-specific Dynamic HTML
if (browser == "ie4up") {
    document.write('<frameset rows="100%,*" frameborder="no" border="0"');
    document.write('marginheight="5" marginwidth="5">');
    document.write('<frame src="ms_dhtml.html" scrolling="auto">');
    document.write('</frameset>');
}
// Frame for Netscape 6 with DOM-standard DHTML
else if (browser == "nn6up") { 
    document.write('<frameset rows="100%,*" frameborder="no" border="0"');
    document.write('marginheight="5" marginwidth="5">');
    document.write('<frame src="dom_dhtml.html" scrolling="auto">');
    document.write('</frameset>');
}
// Frame for Navigator 4 with limited DHTML
else if (browser == "nn4") { 
    document.write('<frameset rows="100%,*" frameborder="no" border="0"');
    document.write('marginheight="5" marginwidth="5">');
    document.write('<frame src="nn4_dhtml.html" scrolling="auto">');
    document.write('</frameset>');
}
</script>
</head>
<body bgcolor="#FFFFFF">
<!-- This is what earlier browsers see; it shouldn't contain any DHTML - ->
</body>
</html>

Example 6-7: HTML for the single-frame method for a DHTML page

  The back-up black hole
 

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.


To page 1To page 2current pageTo page 4
[previous] [next]

Created: December 17, 2001
Revised: December 17, 2001


URL: http://webreference.com/programming/javascript/designing/chap6/2/3.html