Learn Advanced JavaScript Programming

Using Frames to Display Different Pages for Each Browser

You can use a hidden frame to display a different HTML document for each browser or version. This enables you to provide a page for Netscape Navigator 3.0 and up browsers, and another one just for Netscape Navigator 2.0 and MSIE 3.0. The main document is simply a frame-setting document that defines one frame. This technique even handles users with browsers that do not support JavaScript (or have it turned off) or frames. We’ll use the following function to detect the user’s browser:

function getBrowser() {
var browserName = navigator.appName
var browserVer = parseInt(navigator.appVersion)
if (browserName == "Netscape" && browserVer >= 3)
 return "n3"
if (browserName == "Netscape" && browserVer == 2)
 return "n2"
// if (browserName == "Microsoft Internet Explorer" &&
// browserVer >= 2)
 return "e3"
}

Notice the use of the >= operator. We use it to check if the version of the user’s browser is equal to or greater than the specified browser. The usage of the browserName variable is very simple, because it holds a plain JavaScript string for which we test equality. The usage of the browserVer variable, though, is somewhat more complicated. You may recall that navigator.appVersion is a string that begins with the browser version (e.g., 3.01). The parseInt() function evaluates a string from left to right, until it reaches a nondigit character. In the case of navigator.appVersion, it evaluates the string up to the space that separates the version number from the opening bracket, and returns the number in the form of an integer. If the user is running Netscape Navigator 3.01, for instance, the value of browserVer is 3. Since the value of browserVer is always a number, it is correct to compare it to a literal integer via a Boolean comparison operator. Note that the last if statement in the function can be commented out, because the return statement terminates the function, and there is only one possibility left.

In summary, this getBrowser() function returns one of three values (be prepared to modify it as new browsers are released):

"n3" for Netscape Navigator 3.0x and above (Netscape Navigator 4.0 and so forth).
"n2" for Netscape Navigator 2.0x.
"e3" for Microsoft Internet Explorer 3.0x and above.

The next step is to display a different Web page for each browser, or browsers. Example 29-1 shows how to display a different one for each scenario:

<HTML>
<HEAD>
<TITLE>Actual title of page</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--

function getBrowser() {
var browserName = navigator.appName
var browserVer = parseInt(browserVer = navigator.appVersion)

if (browserName == "Netscape" && browserVer >= 3)
 return "n3"
if (browserName == "Netscape" && browserVer == 2)
 return "n2"
if (browserName == "Microsoft Internet Explorer" &&
 browserVer >= 2)
 return "e3"
}

// retrieve user's browser
var browser = getBrowser()

// if client is using Navigator 3.0 or above
if (browser == "n3")
 document.write('<FRAMESET ROWS="100%, *"
  FRAMEBORDER=NO BORDER=0>' +
'<FRAME NAME="main"
SRC="ns3_page.html" ' +
'SCROLLING=AUTO MARGINHEIGHT=2
MARGINWIDTH=2>' +
'</FRAMESET>')
else if (browser == "n2")
document.write('<FRAMESET ROWS="100%, *"
FRAMEBORDER=NO BORDER=0>' +
'<FRAME NAME="main"
SRC="ns2_page.html" ' +
'SCROLLING=AUTO MARGINHEIGHT=2
MARGINWIDTH=2>' +
'</FRAMESET>')
else if (browser == "e3")
document.write('<FRAMESET ROWS="100%, *"
FRAMEBORDER=NO BORDER=0>' +
'<FRAME NAME="main"
SRC="ie3_page.html" ' +
'SCROLLING=AUTO MARGINHEIGHT=2
MARGINWIDTH=2>' +
'</FRAMESET>')
// -->
</SCRIPT>
</HEAD>
</HTML>

Example 29-1. A frames document with only one frame.

Example 29-1 displays a frameset containing one frame. A frameset avoids redirecting the browser to a distinct page, while still keeping the advantages of displaying a different page for each browser. Since the <BODY> tag disables frames, be careful not to place this script within <BODY> tags. The filenames ns3_page.html, ns2_page.html, and ie3_page.html are the URLs of the documents that you want to load for each browser. The file ns3_page.html, for example, loads if the user is running Netscape Navigator 3.0 or above.

Checking if Java is Enabled

We have already discussed the four basic properties of the navigator object, which also happen to be the only properties of this object under Netscape Navigator 2.0x and MSIE 3.0x. Under Navigator 3.0x, though, the navigator object features other important properties.

Select Network Preferences… from the Options menu, and click on the Languages tab. You should see two check boxes:

Enable Java
Enable JavaScript

The Enable JavaScript box should always be checked, unless you want to disable JavaScript. Provided it is checked, you can use the navigator object to detect the Enable Java box’s state. The method that returns a Boolean value according to the box’s state is navigator.javaEnabled(). This method returns true if Java is enabled, and false otherwise. The navigator.javaEnabled() is used mostly in concert with LiveConnect, because LiveConnect requires both Java and JavaScript to be enabled.

Summary

In this chapter, we discussed one of the most important features of JavaScript—browser detection. The ability to detect the user’s browser is extremely useful, because it enables you to provide distinct Web pages to users with different browsers. Thus, your pages can be compatible with all browsers, and at the same time take advantage of features that are available only on the newest versions of Netscape Navigator and Microsoft Internet Explorer. We have also discussed the navigator.javaEnabled() method. The following chapter will suggest some applications of this method.

Table of Contents