Cross-Browser Programming | Inside JavaScript

As we've discussed, if you're programming for general users, the different levels of JavaScript and the various DOMs can make life difficult. In this chapter on the browser environment, therefore, I'll discuss the issue of cross-browser programming.

One solution to the problems of cross-browser programming is to use only those capabilities available in DOM level 0 (see Figure 4.1) and JavaScript 1.0. This means that, although you're restricted in what you can do (remember, for example, that even mouse rollover image-swapping wasn't supported in DOM 0), at least your script will run in all scriptable browsers (and you can use the <NOSCRIPT> element to handle nonscriptable browserssee the discussion of <NOSCRIPT> in Chapter 1).

The next option is to detect the capabilities of the browser you're working with when your script executes; there are two main ways to do that: detecting version information and object detection. I'll take a look at detecting version information first.

Tip

You also can use the LANGUAGE attribute of the <SCRIPT> element; but of course, the version information varies between JavaScript and JScript, and that information still tells you nothing about the DOM for the browser.

Version Detection

In this book, I've listed the browser and version that each language element, each property, method, and event is supported in, which means that if you want to use a specific item, you know whether it'll work in a particular browserif you know what the browser's version is. To determine the browser's version, you can use the appName and userAgent properties of the navigator object. This object also has a userVersion property, but that will not return correct version informationas we saw in Figures 1.12 and 1.13, this property returns 4.0 for Internet Explorer 6.0 and returns 5.0 for Netscape Navigator 6.0. You can use appName to determine the browser you're working in, and search the userAgent property for the correct version information.

Here's a script designed to do just that, filling a variable named version with the (floating-point) version number of the browserit's designed to work with all scriptable versions of the two browsers, from version 3.0 to 6.0 of the Internet Explorer and from version 2.0 to 6.2 of the Netscape Navigator, but there are no guaranteessome interim or beta versions or versions for little-supported operating systems may use a different format for the userAgent property. Here's the code (this code uses some string methods we'll see in Chapter 18, "The Date , Time , and String Objects," such as the substring method):

(Listing 04-07.html on the web site)

 <HTML>      <HEAD>          <TITLE>              Getting Browser Version          </TITLE>      </HEAD>      <BODY>          <H1>Getting Browser Version</H1>          <SCRIPT LANGUAGE="JavaScript">              <!--             var start, end, version              if(navigator.appName == "Netscape") {                  if(navigator.userAgent.indexOf("Netscape") < 0) {                      start = "Mozilla/".length                      end = navigator.userAgent.indexOf(" ", start)                      version = parseFloat(navigator.userAgent.substring(start, end))                      document.write("You are using Netscape Navigator " + version)                  } else {                      start = navigator.userAgent.indexOf("Netscape") +                      "Netscape".length + 2                      end = navigator.userAgent.length                      version = parseFloat(navigator.userAgent.substring(start, end))                      document.write("You are using Netscape Navigator " + version)                  }              }              if (navigator.appName == "Microsoft Internet Explorer") {                  start = navigator.userAgent.indexOf("MSIE ") + "MSIE ".length                  if(navigator.userAgent.indexOf(";", start) > 0) {                      end = navigator.userAgent.indexOf(";", start)                  } else {                      end = navigator.userAgent.indexOf(")", start)                  }                  version = parseFloat(navigator.userAgent.substring(start, end))                  document.write("You are using Internet Explorer " + version)              }              // -->          </SCRIPT>      </BODY>  </HTML>

You can see the results for the Internet Explorer in Figure 4.8 and for the Netscape Navigator in Figure 4.9.

Figure 4.8. Determining the Internet Explorer's version.

graphics/04fig08.gif

Figure 4.9. Determining the Netscape Navigator's version.

graphics/04fig09.gif

Using the information in this book, you can determine whether a particular item is supported in a browser, now that you know the browser's version. On the other hand, it's sometimes easier not to have to work with browser version, but use object detection instead.

Object Detection

Sometimes the best thing to do is to determine whether a particular objector property, or methodis available before using it. Doing so can be easier than tracking down the information about version support that you need if you use version detection. To determine whether you're dealing with a browser that enables you to swap images (that is, with the DOM 0+Images model), for example, you can check whether the document.images collection exists before trying to use it, using an if statement. If it does exist, you can proceed with your code, resetting the SRC attribute of an image, something like this:

 if (document.images){      document.images[0].src = imageURL  }

Here's another example; if you want to determine whether you can use Cascading Style Sheets, you can check whether a particular element supports the STYLE HTML attribute by looking for that element's JavaScript style property, like this:

 if (element1.style){      element1.style.color = "red"  }

Here's another examplein this case, I'm checking for the all collection, for support for layers , and for the getElementById method in order to read the text from a text field:

(Listing 04-08.html on the web site)

 <HTML>      <HEAD>          <TITLE>              Using Object Detection          </TITLE>      </HEAD>      <BODY>          <H1>Using Object Detection</H1>          <FORM NAME="form1">              <INPUT TYPE=TEXT VALUE="Hello!" NAME="nameObject1" ID="idObject1">          </FORM>          <SCRIPT LANGUAGE="JavaScript">              <!--  var object1   if (document.all){   object1 = document.all("iDobject1")   } else if (document.getElementById) {   object1 = document.getElementById("idObject1")   } else if (document.layers) {   object1 = document.form1.nameObject1   }   if(object1){   document.write(object1.value)   }  // -->          </SCRIPT>      </BODY>  </HTML>

You also can check for W3C DOM support by checking for W3C DOM properties, such as documentElement (which returns a reference to the <HTML> element in a web page):

 var W3CSupport = (document.documentElement) ? true : false

In fact, you can determine browser and browser version using object detection using a series of if statements in order, like this:

 if (document.characterSet){      window.location.href="NS6.html"  }  if (document.docType){      window.location.href="IE6.html"  }  if (document.documentElement)      window.location.href="IE5.html"  }  if (document.all)      window.location.href="IE4.html"  }  if (document.layers)      window.location.href="NS4.html"  }  if (document.images)      window.location.href="NS3.html"  }

Redirecting Browsers

Although it's possible to embed scripts for different browsers in a web page, you also can redirect browsers to entirely new pages, one for each browser. Here's an example that does that, by setting the window.location.href prop-erty; note also that it redirects other browsersand browsers that don't support scriptingusing a <META> element:

(Listing 04-09.html on the web site)

 <HTML>      <HEAD>          <TITLE>Redirecting Browsers</TITLE>          <SCRIPT LANGUAGE="JavaScript">              <!--  if (navigator.appName == "Microsoft Internet Explorer") {   window.location.href="IE.html"   }   if(navigator.appName == "Netscape") {   window.location.href="NS.html"   }  //-->          </SCRIPT>  <META HTTP-EQUIV="refresh" CONTENT="0; URL=default.html">  </HEAD>      <BODY>          <H1>Redirecting Browsers</H1>      </BODY>  </HTML>

Creating Objects Based on Browser Type

Here's another alternative to providing multiple pages for different browsersyou can use the eval function to create objects appropriate to a particular browser on-the-fly , just passing their names . We saw how this works in the preceding chapter, where we created an object reference to the document object:

 <HTML>      <HEAD>          <TITLE>              Using the eval Function          </TITLE>      </HEAD>      <BODY>          <H1>Using the eval Function</H1>          <SCRIPT LANGUAGE="JavaScript">              <!--  var obj = "document"   for (var property in eval(obj)) {   document.write(property + ": " + document[property] + "<BR>")   }  // -->          </SCRIPT>      </BODY>  </HTML>

Using Script Libraries

Here's another alternative for cross-browser programmingyou can use different script files, .js files, for different browsers and browser versions:

 <SCRIPT LANGUAGE="JavaScript">      <!--     if (navigator.appName == "Microsoft Internet Explorer") {          document.write("<SCRIPT LANGUAGE='JavaScript' SRC=='ie.js'></SCRIPT>")      }      if(navigator.appName == "Netscape") {          document.write("<SCRIPT LANGUAGE='JavaScript' SRC=='ns.js'></SCRIPT>")      }      //-->  </SCRIPT>

We'll see more on cross-browser issues throughout the book, such as cross-browser event handling.