The navigator object

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

document.getElementById("output").innerHTML = navigator.property

Property	Description and Current Setting
appCodeName	The browser's code name:
appName	The browser's application name:
language	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:

The navigator object also includes one method. The browser (navigator) method is accessible like the object properties

navigator.method()

Method	Description and Current Setting
javaEnabled()	Returns true if Java is enabled and available:

Figure 7-2. Method 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.

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 if (navigator.userAgent.indexOf("Chrome") != -1 ) {
    alert("You are running Chrome."); }
  else {
    alert("You are running some odd-ball browser.");
  }
}

function init()
{
  var btnBrowser = document.getElementById("btnBrowser");
  btnBrowser.onclick = whichBrowser;
}

window.onload = init;

<input type="button" value="Which Browser?" id="btnBrowser">

Listing 7-1. Code to test for browser.

Determining the Platform

There are differences among the same browser running on different platforms, that is, under different operating systems. 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."

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.");
  }
}

function init()
{
var btnPlatform = document.getElementById("btnPlatform");
btnPlatform.onclick = whichPlatform;
}

window.onload = init;

<input type="button" value="Which Platform?" id="btnPlatform">

Listing 7-3. Code to test for browser platform.

The need to check for different browsers and operating systems is to adjust both HTML 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.

TOP | NEXT: Chapter 8 - Document Object