Working with Different Types of Browsers

[ LiB ]

Throughout this book, I have stated again and again that because of the constantly evolving nature of JavaScript and Internet browsers, creating Web pages that everyone can use is a bit of a chore. This task continues to be made more difficult by the appearance of new technologies such as small handheld devices and appliances that are now beginning to access the Internet but that have no JavaScript support whatsoever.

The next two sections describe how to interrogate every visitor's browser for information about its JavaScript capabilities and cover ways in which you might try to support various browsers.

Gathering Browser Information

The following example shows how to determine the type of browser and the version number of the browser that a visitor is using to load your Web page. The script uses the navigator object to collect browser-specific information.

 <HTML>   <HEAD>     <TITLE> Script 4.13 - Gathering Browser information</TITLE>   </HEAD>   <BODY>     <SCRIPT LANGUAGE="JavaScript" TYPE="Text/JavaScript">     <!-- Start hiding JavaScript statements       document.write("You are using " + navigator.appName + "<BR>");       document.write("Version: " + navigator.appVersion);     // End hiding JavaScript statements -->     </SCRIPT>   </BODY> </HTML>

The script consists of just two statements. The first statement uses the document.write() method to display a message. The message uses the navigator.appName property to display the name of the browser viewing the page:

 document.write("You are using " + navigator.appName + "<BR>");

A second document.write() statement displays another message using the navigator.appVersion property:

 document.write("Version: " + navigator.appVersion);

When you load this example, you will see results similar to those in Figure 4.17, depending on the browser you are using.

Figure 4.17. Using the `navigator` object's properties to gather information about the browser that loaded your Web page

graphic/04fig17.gif

A Browser Redirection Example

Once you know how to use the properties of the navigator object to capture browser information, you can write scripts that redirect visitors to pages you have written to support those particular browsers. The following example shows one manner in which you can do this.

 <HTML>   <HEAD>     <TITLE> Script 4.14 - A browser redirection example</TITLE>   </HEAD>   <BODY>     <SCRIPT LANGUAGE="JavaScript" TYPE="Text/JavaScript">     <!-- Start hiding JavaScript statements       if ((navigator.appName=="Microsoft Internet Explorer")           (navigator.appName=="Netscape")) {         if (navigator.appName=="Microsoft Internet Explorer") {           if (navigator.appVersion.indexOf("5") > - 1) {             window.location = "Default.html";           } else {             document.write("Please upgrade to IE version 5 or above.");           }         }         if (navigator.appName=="Netscape") {           if (navigator.appVersion.indexOf("5") > - 1) {             window.location = "Default.html";           } else {             document.write("Please upgrade to Netscape version 6 or above.");           }         }       } else {         document.write("This site requires Internet Explorer 5 or above ");         document.write("or Netscape Communicator 6 and above.");       }     // End hiding JavaScript statements -->     </SCRIPT>   </BODY> </HTML>

First the script checks to see if either Microsoft Internet Explorer or Netscape Communicator is being used as shown below.

 if ((navigator.appName=="Microsoft Internet Explorer")    (navigator.appName=="Netscape")) {

If neither or these browsers is being used, the visitor is informed that the Web site requires one of two browsers, as shown below.

 } else {   document.write("This site requires Internet Explorer 5 or above ");   document.write("or Netscape Communicator 6 and above."); }

Assuming that one of these two browsers is being used to view the HTML page, the following collections of if statements execute.

 if (navigator.appName=="Microsoft Internet Explorer") {   if (navigator.appVersion.indexOf("5") > - 1) {     window.location = "Default.html";   } else {     document.write("Please upgrade to IE version 5 or above.");   } } if (navigator.appName=="Netscape") {   if (navigator.appVersion.indexOf("5") > - 1) {     window.location = "Default.html";   } else {     document.write("Please upgrade to Netscape version 6 or above.");   } }

The first collection of statements executes when Internet Explorer is being used. The second set executes when Netscape Communicator is in use. Both sets perform the same actions, making sure that a specific version of each browser (or higher-level version) is being used. If the correct browser version is being used, the visitor's browser is redirected to an HTML page called Default.html . Otherwise, a message is displayed informing the visitor that he needs to upgrade his browser to view your Web page.

[ LiB ]

Working with Different Types of Browsers