Application Techniques



Recognizing your Browser

How to use JavaScript to get information (type and version) about the browser in which the page is currently displayed.

About this technique

Details

Category

HTML Client Techniques> JavaScript

Description

You'll learn about:

You can run an example that uses Approach 1 from:

First make sure that database is running on your localhost SilverStream Server

Related reading

See the chapter on advanced page topics in the Programmer's Guide

Approach 1: Getting the appName and appVersion   Top of page

This approach gets information about the current browser by using the appName and appVersion properties of the browser's navigator object.

  <script language="JavaScript"> 
  <!-- 
   
        // Create a variable and assign the name of the browser as  
        // its value. 
   
     browserName = navigator.appName; 
   
        // Create a variable and assign the version number of the 
        // browser as its value.  Edit the value of the variable 
        // so it is only the number. 
   
     browserVer = navigator.appVersion; 
     browserVer = browserVer.substring(0,browserVer.indexOf(".") + 3); 
         
        // Output for navigator.appVersion looks like this before it 
        // is parsed: 
        //    4.0 (compatible; MSIE 4.01; Windows NT) 
        // 
        // You need to reduce it to just the version number. 
        // After the string manipulation, browserVer looks like this: 
        //    4.0 
        //  
        // For printing out the version number, this format is fine. 
        // If you wanted to compare the number, which you will later on  
        // in the script, you need to parse that string into an integer 
        // value by doing this: 
        //    parseInt(browserVer) 
        //  
        // Your result will look like this: 
        //    4 
   
        // At this point, you would put your actual browser check in 
        // (as shown in the next section). 
   
  //--> 
  </script> 

Testing with the appName value

You can use the appName value to perform processing based on the browser type.

     if ((browserName == "Netscape") ||  
         (browserName == "Microsoft Internet Explorer")) { 
           // If they are using Netscape or Internet Explorer then 
           // execute the code in this block. 
     } 
     else { 
           // If they are not using Netscape or Internet Explorer then 
           // execute the code in this block. 
     } 

Testing with the appVersion value

You can use the appVersion value to perform processing based on the browser version.

     if (((browserName == "Netscape") || 
          (browserName == "Microsoft Internet Explorer")) && 
         (parseInt(browserVer) >= 4)) { 
   
           // Using Netscape 4+ or MSIE 4+ 
     } 
     else { 
           // Not using Netscape 4+ or MSIE 4+ 
     } 

Putting it all together

You can use the following script at the top of your page to perform a concise test of the browser's type and version.

  <script language="JavaScript"> 
  <!-- 
   
           // You can write the whole check into one line of code which checks 
           // either yes or no on general browser compatibility 
   
     browserCheck = ((navigator.appName == "Microsoft Internet Explorer") || 
                     (navigator.appName == "Netscape")) &&  
                    (parseInt(navigator.appVersion) >= 4) 
   
  //--> 
  </script> 

Then you can do this simple check from any of the other scripts in the page:

     if (browserCheck) { 
        // Ok 
     } 
     else { 
        // Not Ok 
     } 

Approach 2: Getting the userAgent   Top of page

This approach gets information about the current browser by using the userAgent property of the browser's navigator object.

  <script> 
  <!-- 
   
     // These two lines of code check to see if the client is using either 
     // Netscape or MSIE 4+.  They do not provide specific information. 
   
     browserAgent = navigator.userAgent; 
     browserCheck = (browserAgent.indexOf("Mozilla/4") > 0); 
   
  //--> 
  </script> 

Pros and cons

This approach gives you more information (including the name of the operating system the client is using), but gets a little more complicated later on if you want to specifically determine the client's browser. Another disadvantage to userAgent is that Internet Explorer and Netscape give information in different formats. For example:

Testing with the userAgent value

You can use the userAgent value to perform processing based on the browser type, version, or operating system.

  <script> 
  <!-- 
   
        // First create a variable with the information in 
        // navigator.userAgent as its value. 
   
     browserAgent = navigator.userAgent; 
   
        // Now setup boolean variables checking browserAgent 
        // for specific information. 
   
     hasNT = (browserAgent.indexOf("NT")); 
     isNetscape = (browserAgent.indexOf("Mozilla") >= 0) &&  
                  (browserAgent.indexOf("MSIE") < 0); 
     isMSIE = (browserAgent.indexOf("MSIE") > 0); 
     isVersion = (browserAgent.indexOf("4") > 0); 
   
  //--> 
  </script> 

Then you can do this simple check from any of the other scripts in the page:

     if (isVersion) { 
        if (isNetscape) { 
           // Netscape 4+ code here 
        } 
        else { 
           // Any other 4+ browsers would get this 
           // If you wanted to specify just MSIE, you'd have to add another check 
        } 
     } 

For example:

     if (hasNT) { 
        if (isVersion) { 
           if (isNetscape) { 
              // Using Netscape 4+ and Windows NT 
           } 
           else if (isMSIE) { 
              // Using MSIE 4+ and Windows NT 
           } 
           else { 
              // Using another 4+ browser and Windows NT 
           } 
        } 
        else { 
           // Using Windows NT but not a 4+ browser 
        } 
     } 
     else { 
        if (isVersion) { 
           if (isNetscape) { 
              // Using Netscape 4+ but not Windows NT 
           } 
           else if (isMSIE) { 
              // Using MSIE 4+ but not Windows NT 
           } 
           else { 
              // Using another 4+ browser but not Windows NT 
           } 
        } 
        else { 
           // Not using Windows NT and not a 4+ browser 
        } 
     } 






Copyright © 2000, SilverStream Software, Inc. All rights reserved.