Executing Different Code in Different Browsers

One of the issues with JavaScript, as you’re going to see in this book, is that you must deal with different browsers in different ways. This is because the set of objects each browser supports is different, and the way you work with them is different. Fortunately, now that you know about the if statement, you can handle the major browsers in different ways.

The following example works by checking which browser the user has, and executing code accordingly. For example, the way you create an XMLHttpRequest object, which is the very heart of Ajax, is very different in Internet Explorer than in Firefox. To check which browser the user has, you can use the navigator object, which is built into all browsers to support JavaScript. Here are the relevant properties of this object:

navigator.AppName: The type of the browser.
navigator.AppVersion: The version of the browser.
navigator.UserAgent: Additional information about the browser.

For example, here’s a script that displays these properties in a Web page, browsers.html:

 <html>     <head>         <title>             Getting browser information         </title>         <script language="javascript">             function showMessage()             {               var text = "Your browser is " + navigator.appName;               text += "<br><br>";               text += "Your browser's version is  " +                 navigator.appVersion;               text += "<br><br>";               text += "Here is the full information: " +               navigator.userAgent;               document.getElementById("targetDiv").innerHTML =                 text;             }          </script>     </head>     <body onload="showMessage()">         <h1>Getting browser information</h1>           <div >         </div>     </body> </html>

You can see what this page looks like in Firefox in Figure 2.16, and in Internet Explorer in Figure 2.17.

image from book
Figure 2.16: Determining that the user’s browser is Firefox

image from book
Figure 2.17: Determining that the user’s browser is Internet Explorer

How about executing code depending on which browser the user has? Here’s another example that lets you do just that, and it uses the if and else statements, as well as some JavaScript string-handling properties and methods:

The length property of a string returns the length of the string.
The indexOf method finds the occurrence of a substring in a string and returns the location of the first match, or -1 if there was no match. Note that the first character of a string is considered character 0.
The substring method extracts a substring from a larger string. You pass this method the start and end positions of the substring to extract.

Here’s how this example, checkBrowser.html, works: it uses JavaScript to search the naviga-tor.userAgent property, which, as you’ve already seen in this chapter, holds the browser name and version, extracts that information, and displays it. You can see how the code selects browser type with the if statements (don’t bother to memorize this code, just put it to use in your own Ajax applications). You can easily modify the if statements in this example to execute code only for specific browsers-the code in the first if statement is executed if the user has Firefox:

 <html>   <head>     <title>       Determining browser type and version     </title>     <script language="javascript">     var begin, end     function showMessage()     {       if(navigator.appName == "Netscape") {         if(navigator.userAgent.indexOf("Firefox") > 0) {           begin = navigator.userAgent.indexOf("Firefox") +           "Firefox".length + 1;           end = navigator.userAgent.length;           document.getElementById("targetDiv").innerHTML =             "You are using Firefox " +             navigator.userAgent.substring(begin, end);          }       }          .          .          .

And the code in the other if statement is executed if the user has Internet Explorer:

 <html>   <head>     <title>       Determining browser type and version     </title>     <script language="javascript">     var begin, end     function showMessage()     {       if(navigator.appName == "Netscape") {         if(navigator.userAgent.indexOf("Firefox") > 0) {         begin = navigator.userAgent.indexOf("Firefox") +         "Firefox".length + 1;         end = navigator.userAgent.length;         document.getElementById("targetDiv").innerHTML =           "You are using Firefox " +           navigator.userAgent.substring(begin, end);       }     }     if (navigator.appName == "Microsoft Internet Explorer") {       begin = navigator.userAgent.indexOf("MSIE ") +       "MSIE ".length;       if(navigator.userAgent.indexOf(";", begin) > 0) {         end = navigator.userAgent.indexOf(";", begin);       } else {         end = navigator.userAgent.indexOf(")", begin)            + 2;       }       document.getElementById("targetDiv").innerHTML =         "You are using Internet Explorer " +         navigator.userAgent.substring(begin, end);       }     }     </script>   </head>   <body onload="showMessage()">     <h1>Determining browser type and version</h1>      <div ></div>   </body> </html>

As it is, this application uses the if statements to display the browser type and version. The results in Firefox are shown in Figure 2.18, and the results for Internet Explorer are shown in Figure 2.19. As you can see, alternate code was executed in those two browsers. Very cool.

image from book
Figure 2.18: Determining the user’s Firefox version

image from book
Figure 2.19: Determining the user’s Internet Explorer version

Okay, you’ve seen the if statement and the else statement, which let you make choices at run time, and execute different code depending on the true/false condition you test. The next step up in JavaScript programming is to start working with loops.