Chapter 14
Navigating with Navigator 

In This Chapter

Back when I was a nervous youth, our board of education, possibly motivated by revenge, felt that it was necessary to provide three strata of physical education classes. Each strata was oriented towards a different Phys. Ed. capacity: budding professional, middling-but-mobile, and victim. Several weeks into the semester, we’d be run through a battery of quasi-legal “tests,” several of which probably violated the Geneva Convention. Result cards in hand, we’d stand in queue as the gym instructor (officially, “herr gym instructor”) looked us over and pointed us towards a collection point for one of the three strata. 

Fortunately, those extended years of trauma now yield a poignant analogy: the Navigator Object, which identifies the Web browser being used to load the Web page, can be used to tailor a Web site towards a particular browser. It enables you to detect the presence of certain plug-ins or redirect users to new pages created for their browser’s capabilities.

Identity, Please

Built into JavaScript 1.0 and enhanced in JavaScript 1.1, the Navigator Object reports several variants on the identity and capability of the browser being used to load the current page. By cleverly using this information, you can tailor the behavior of a Web page. For example, you can display a Shockwave plug-in if a Shockwave plug-in is installed, or you can send the visitor to a page designed for Microsoft Internet Explorer 3.0 if that’s his browser.

What’s in a Name?

Understanding and using the Navigator Object is fairly simple. So there’s no point in “prevaricating around the bush.” Let’s begin!

Under both JavaScript 1.0 and JavaScript 1.1, the Navigator Object supports the properties described in the following sections.

appCodename

The “codename” is the internal name by which the Web browser identifies itself. Netscape Navigator, for instance, identifies itself as Mozilla. (Curiously, Microsoft Internet Explorer 3.0 also identifies itself as Mozilla; this is a compatibility trick, which allows some pages and servers to offer the same content to Internet Explorer as it would to Netscape Navigator.)

Thus, the JavaScript expression

navigator.appCodename

will yield “Mozilla” if the visitor is using either Netscape Navigator or Microsoft Internet Explorer.

Mozilla?
“Mozilla” is sort of a joke—one that Netscape has encouraged to live on. For several years in history, when Netscape Navigator was first released, it was not called “Navigator.” In fact, it was called simply “Netscape,” which later became the name of the company. Actually, Netscape was called “Mozilla.” Huh?? In written form, the first versions of Netscape were written as “Mozilla,” but pronounced “Netscape.” This, apparently, was the result of some strange sense of humor on the developers’ part. However, as Netscape morphed into a rising corporate star and their browser began to reach the limelight, they realized that spelling “Mozilla” and pronouncing “Netscape” was a confusing marketing scheme (and it’s also not that funny). Hence, Mozilla was dropped in favor of the more sober “Navigator.”

appName

appVersion

userAgent

Who Goes Where?

Conceptually, making use of the above properties of the Navigator Object is easy. For instance, imagine that your site contains two home pages, one designed for Netscape users and one for Internet Explorer users. You could create a “false” home page, which actually contains JavaScript that determines the visitor’s browser. It then automatically loads the correct page.

Another idea: Because JavaScript 1.1 is currently supported only in Netscape Navigator 3.0, you could test for that browser. If present, you proceed with executing certain JavaScript 1.1-specific functions (such as using an array or replacing images with the Image Object). If Navigator 3.0 is not present, you stick to only JavaScript 1.0 code and forego the added capabilities of 1.1. At the least, this allows users of both types of browsers to receive some functionality from the page.

Speaking of JavaScript 1.1, three additions to the Navigator Object are introduced in that version, which further expand your ability to sniff out features of the user’s browser.

javaEnabled()

plugins Array

mimeTypes Object

He Went That-a-Way

Using some of the knowledge in this chapter, you can use the Navigator Object to instantly and automatically redirect a visitor to the page designed for his browser.

Imagine, for instance, that you’re a very industrious sort. You’ve designed two versions of your home page: one with layout optimized for Netscape Navigator and one optimized for Microsoft Internet Explorer. For example, Internet Explorer 3.0 supports graphic backgrounds within table cells, but Navigator 3.0 does not. You’ve saved your two home pages as nspage.htm and msiepage.htm, respectively.

Thus, you now code the redirection page (saved as home.htm). It is this page, home.htm, that users will initially visit (having jumped there from a link at another site). From there, they’ll automatically be taken to the “real” home page designed for their browser. The redirection page need not contain any content, only a small bit of JavaScript code. Logically, it’s simple: determine whether the user is using Navigator or Internet Explorer, and then send him to the appropriate home page.

<html>
<head>
<title>Browser Redirection</title>
</head>
<body bgcolor="#FFFFFF">
<script>
if (navigator.appName.indexOf("Explorer")==-1)
{ url ="nspage.htm" }
else { url = "msiepage.htm" }
</script>
</body>
</html>

That’s all! In the above, you merely check for the string “Explorer” anywhere in the appName property of the Navigator Object. If it’s not present (–1), the user is not using Internet Explorer, and he is sent to the Netscape page (url = “nspage.htm”). (Of course, he may not be using Navigator, either, but that is your only alternative page.)

On the other hand, if the string “Explorer” is found within the appName property, the string indexOf() method returns its position (anything other than –1), and you know that the user is browsing with Internet Explorer. Thus, he is sent to msiepage.htm.

Similarly, you can use any of the Navigator Object properties and methods discussed in this chapter to tailor the behavior of a Web page.

The Least You Need to Know

Previous Chapter Next Chapter


Beginning of ChapterTable of ContentsBook Home PageQue Home Page


For comments or technical support for our books and software, select Talk to Us.
To order books, call us at 800-716-0044 or 317-228-4366.

© 1997, QUE Corporation, an imprint of Macmillan Publishing USA, a Simon & Schuster Company.