Joe Maller: JavaScript: JavaScript Browser Detection

Compatibility issues sometimes require page authors to restrict access to a page to a specific set of web browsers. The concepts explained below can be used to build a browser detection script capable of just about anything.

All Browsers are Navigators

All JavaScript browser detection is based on the "navigator" object, which could just be thought of as the browser. The name is a vestigial little piece of Netscape remaining in the JavaScript language. Netscape's first product was called Navigator, back before it got all kludged up with Communicator, news readers, e-mail and lots of things that didn't work very well. The Navigator element has properties that scripts can use to find out exactly what kind of browser is running.

Browser Properties

JavaScript defines eight properties browsers can report:

• appCodeName
  Specifies the code name of the browser.
• appName
  Specifies the name of the browser.
• appVersion
  Specifies version information for the Navigator.
• language
  Indicates the translation of the Navigator being used.
• mimeTypes
  An array of all MIME types supported by the client.
• platform
  Indicates the machine type for which the Navigator was compiled.
• plugins
  An array of all plug-ins currently installed on the client.
• userAgent
  Specifies the user-agent header.

Checking your Browser

The properties returned are different for each browser and platform. A small document.write() script with some HTML strings will display the values , try it different browsers:

<SCRIPT>
document.write(
"<P>The property <B>navigator.userAgent</B> "
  + "returns:<BR><B><FONT COLOR='#0000CC'>" 
  + navigator.userAgent +"</FONT></B></P>"
)
</SCRIPT>

The above script returns the following:

Putting it to work

Now that the returned data is established, conditional if/then statements can be used to trigger events based on any of the navigator attributes.

The following statement checks the position of the string "Netscape" in the navigator.appName:

<SCRIPT>
document.write("<P><B><FONT COLOR='#0000CC'>")

if(navigator.appName.indexOf("Netscape")>(-1)){
  document.write(
    "This is a Netscape Browser"
  ) 
}
else { 
  document.write(
    "this is not a Netscape Browser"
  ) 
}

document.write("</FONT></B></P>")
</SCRIPT>

The script's results look like this:

By replacing the two document.write()messages with other JavaScript functions this simple script becomes a functioning browser detector. A simple redirect can point the visitor to a different page:

self.location="http://www.joemaller.com"

That will result in an instantaneous transfer to the URL specified. One way of shifting users based on their browsers would be to detect JavaScript enabled users and send them to a different page while the remainder of this page would be plain HTML for those not redirected by the script.

Location Location Location

The if() statement above used the indexOf()string method to return the numerical position of the query "Netscape" within the source object navigator.appName. If the query string does not appear in the source object, indexOf() will return -1.

indexOf() can be used on just about anything, and will always return a number corresponding to the first occurrence of the query string in the source object.

Conclusions

The basic idea behind browser detection is pretty simple. Based on the concepts above, most any browser detection script can be developed. Most programming is just a collection of simple functions stacked on top of one another. Hope this was helpful.

Joe Maller

(this page was salvaged from an incomplete 1996 original)