The navigator Object

Beginning at the top of the DOM object hierarchy, the navigator object has properties related to the browser being used to view a Web page. Browser (navigator) properties are accessible like any other object properties.

navigator.property
Figure 7-1. General format to reference properties of the navigator object.

For each of the following properties, its value is shown for the browser you are using to view this page. These properties are read and displayed during page load with inline scripts in the format

<script type="text/javascript">
  document.write("<b>" + navigator.property + "</b>");
</script>
Property Description and Current Setting
appCodeName The browser's code name:
  
appName The browser's application name:
  
browserLanguage  The language used for display:
  
cookieEnabled Whether the browser permits reading and writing of cookies:
  
cpuClass The type of CPU of the computer running the browser:
  
platform The operating system type running the browser:
  
userAgent Information about the brower, version, and operating system platform:
  
Figure 7-2. Selected properties of the navigator object.
Determining the Browser

One of the common uses of the userAgent property is to determine the general capabilities of a client's browser. Especially when using JavaScript code, there is the risk that visitor's with older or incompatible browsers will not be able to view page content generated by scripts. Information about the client browser is contained in the userAgent string that looks something like the following for Internet Explorer, FireFox, Netscape, and Opera.

Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 2.0.50727)
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.0.1) Gecko/20060111 
  Firefox/1.5.0.1
Mozilla/5.0 (Windows; U; WinNT4.0; en-US; rv:0.9.4.1) Gecko/20020508 
  Netscape6/6.2.3
Opera/7.0 (Windows NT 4.0; U) [en]

To determine whether the visitor is using one of these browsers you need to look for "MSIE,", "Firefox,", "Netscape," or "Opera" in the userAgent string. Use the indexOf() method to look for these references.

<script type="text/javascript">

function WhichBrowser()
{
  if (navigator.userAgent.indexOf("MSIE") != -1) {
    alert("You are running Microsoft Internet Explorer."); }
  else if (navigator.userAgent.indexOf("Firefox") != -1) {
    alert("You are running FireFox."); }
  else if (navigator.userAgent.indexOf("Navigator") != -1) {
    alert("You are running Netscape."); }
  else if (navigator.userAgent.indexOf("Opera") != -1 ) {
    alert("You are running Opera."); }
  else {
    alert("You are running some odd-ball browser.");
  }
}

</script>

<input type="button" value="Which Browser?" onclick="WhichBrowser()"/>
Listing 7-1. Code to test for browser.

Determining the Browser Version

Checking for the current version of the visitor's browser is more problematic. You cannot depend on the version number being located in the same position in the userAgent string for every browser and every version. It is probably sufficient to look for the substring "6." or "7." to be assured of a modern browser.

<script type="text/javascript">

function WhichVersion()
{
  if (navigator.userAgent.indexOf("6.") != -1 ||
    navigator.userAgent.indexOf("7.") != -1) {
    alert("You are using a modern browser."); }
  else {
    alert("You need to update your browser.");
  }
}

</script>

<input type="button" value="Which Version?" onclick="WhichVersion()"/>
Listing 7-2. Code to test for browser version.

Determining the Platform

There are differences among the same browser running on different platforms, that is, under different operating systems. Subtle differences appear, for example, with Internet Explorer running on a Windows PC versus a Mac. You can test for the type of computer being used through the navigator.platform string. Common tests include those for the lower-case substrings "win," "mac," "unix," and "linux."

<script type="text/javascript">

function WhichPlatform()
{
  var OS = navigator.platform.toLowerCase();
  if (OS.indexOf("win") != -1) {
    alert("You are running Windows OS."); }
  else if (OS.indexOf("mac") != -1) {
    alert("You are running Mac OS."); }
  else if (OS.indexOf("unix") != -1) {
    alert("You are running Unix OS."); }
  else if (OS.indexOf("linux") != -1) {
    alert("You are running Linux OS."); }
  else {
    alert("Please buy a computer.");
  }
}

</script>

<input type="button" value="Which Platform?" onclick="WhichPlatform()"/>
Listing 7-3. Code to test for browser platform.

The need to check for different browsers and operating systems is to adjust both XHTML and JavaScript code for compatibility. In the easiest case, you may need to provide alternate code for different types of browsers or computers; in the most severe case, you may need to create entirely different pages. There is usually some type of trade-off between making pages compatible for different systems versus the amount of time and effort involved. There is no hard and fast rule; it depends primarily on the number of visitors arriving at your site with various computers and browsers.