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':
<!--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.
(2) The syntax of HTML comments is documented by the W3C here.
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">
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 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:
if (navigator.appName == "Netscape") window.location="nspage.html";
The navigator object and the DOM
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.