reptile7's JavaScript blog
Saturday, November 04, 2006
Scent of a Browser
Blog Entry #56

We continue the previous post's "torn between two locations" theme in this and the next entries as we examine two browser detection scripts that (a) attempt to determine which browser the user is using and then (b) route the user to alternate (≥2) locations that respectively cater to different browsers, a process sometimes termed "browser sniffing." I am hesitant to discuss these scripts almost as a matter of principle - I expressed my disdain for browser-specific Web design back in Blog Entry #12 - and yet the archivist in me demands that we talk about them to at least some extent, so we will.

I also point out that these scripts were both written during the 1996-1998 Internet Explorer vs. Netscape Navigator browser war, and are thus in a sense rather dated. But there's nothing stopping us from refreshing them a bit, is there?

The Script Tips #10-12 Script

Script Tips #10, #11, and #12 discuss the following 'browser sniffer':

<script language="javascript">
<!--Hide the Script
//This Script written by Joe Burns, Ph.D.
//Use it freely
if (navigator.appName == "Netscape")
// End hiding the Script-->
<!--The appName property is incorrectly capitalized in Script Tips #10-12.-->

Let's briefly take stock of the script issues that Joe chooses to address.

Script Tip #10 discusses the use and syntax of JavaScript comments and also the use of HTML commenting to hide JavaScript scripts from non-JavaScript-capable browsers - we previously covered these topics in Blog Entry #6. For those in the audience who might want primary source references in this regard:
(1) JavaScript commenting is treated in Chapter 4 ("Comments") of the JavaScript 1.5 Core Reference.
(2) The syntax of HTML comments is documented by the W3C here.
(3) For using the <!-- and //--> markup to comment out JavaScript scripts, see the "Hiding Scripts Within Comment Tags" section of the JavaScript 1.3 Client-Side Guide.

Script Tip #11 discusses the == comparison operator and the = assignment operator. If I didn't know better, then I'd say that Joe sounds almost confused here about the difference between these operators, which are both "equal" operators but reflect totally different operations. We fleshed out the == and = operators in Blog Entries #37 and #30, respectively, but just to recap, consider the following code:

<body bgcolor="red" text="white">
<script type="text/javascript">
var bool = (document.bgColor == "#ff0000");

The <body> tag creates a document object with a red background and a white foreground. In the subsequent script, the (document.bgColor == "#ff0000") expression compares document.bgColor with the red hex value #ff0000 as to their equality, returning a Boolean value - true in this case - that is assigned to the variable bool, which is then displayed on an alert( ) box. The == operator does not assign #ff0000 to document.bgColor; the bgcolor="red" attribute in the <body> tag did that. We'll return to these operators when we deconstruct the Script Tips #10-12 Script in just a bit.

Script Tip #12 mostly discusses if...else statements (recall that the Script Tips #5-9 Script contained an if statement without an else statement) and provides a brief script deconstruction; I trust we don't need to go over if...else statements at this point.

Deconstructing the Script Tips #10-12 Script

As shown above, the Script Tips #10-12 Script consists of several comment lines and a single if...else statement. The if statement's condition, navigator.appName == "Netscape", compares the value of the appName property of the navigator object to Netscape; if they're equal, then the if condition returns true, so nspage.html is assigned to the location property of the window object, setting up a link to the nspage.html Web page, which presumably is tailor-made for the Netscape browser. (We've previously noted that window.location=URL, parent.location=URL, and even just location=URL are all interchangeable outside of a frames situation.)

If navigator.appName and Netscape are not equal, then the if condition returns false, so the else "catch-all" kicks in: msiepage.html is assigned to parent.location, setting up a link to the msiepage.html Web page, which is meant for Internet Explorer or other non-Netscape browsers.

The "Additional Browsers' Navigator Information" section of JavaScript Kit's navigator object page reveals that navigator.appName == "Netscape" would return true for recent versions of the AOL, Firefox, Mozilla, Netscape, and Safari browsers - perhaps the Script Tips #10-12 Script is not so dated after all.

The script's design implies the creation of three Web pages: the nspage.html page, the msiepage.html page, and a separate page for the script itself. Clearly, it'd be more efficient to just code the nspage.html and msiepage.html pages and then use as an entry point the msiepage.html page containing the condensed script below:

<script type="text/javascript">
if (navigator.appName == "Netscape") window.location="nspage.html";

The navigator object and the DOM

The navigator object is created automatically by the browser's JavaScript engine and without reference to a loading document. In the classic JavaScript Navigator object hierarchy, the navigator object is not part of the window object 'tree'; rather, the navigator object is a 'peer' of the window object and heads its own mini-hierarchy with mimeTypes[ ] and plugins[ ] arrays as 'children.'

However, at some point Netscape/Mozilla evidently decided that the navigator object should be a property of the window object, and Mozilla's DOM window Reference accordingly sports a window.navigator page.

The "Specification" section of Mozilla's window.navigator page states that the navigator object is "DOM Level 0. Not part of any standard," which is correct as of this writing. The W3C's Window Object 1.0 working draft does not include "Client information ('window.navigator')."

In the next post, we'll check over the more complicated browser sniffer of Script Tips #13-15 and perhaps see what we can do to bring these scripts into the modern era.


Comments: Post a Comment

<< Home

Powered by Blogger

Actually, reptile7's JavaScript blog is powered by Café La Llave. ;-)