Приглашаем посетить
Горький (gorkiy-lit.ru)

7.3 Detection

Table of Contents

Previous Next

7.3 Detection

7.3.1 Browser detection

In many cases, it is important for Web designers to ensure that the right design goes to the right browsers. There are a number of ways to detect different browser software. For example, we have used IE's document.all feature in Chapter 6 to distinguish between IE and NS browsers. One easy practical statement



var IE = document.all?true:false

can do the trick. However, this statement contains no information about the identity of the browser or its version. For proper identity detection, you need to use the properties of the navigator object inside the browser. Consider the following example ex07-06.htm:



Example: ex07-06.htm - Browser Detection

 1: <?xml version="1.0" encoding="iso-88591"?>
 2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 3:     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 5: <head><title> Browser Detection - ex0706.htm </title></head>
 6: <body style="font-family:arial;font-size:16pt;color:#000088">
 7:  <script>
 8:    document.write(window.navigator.appName +"<br />")
 9:    document.write(window.navigator.appVersion +"<br />")
10:  </script>
11: </body>
12: </html>

The name (or identity) of the browser is usually stored in the appName property of the navigator object (line 8) and the appVersion property carries the version number (line 9). Examples of detection results on IE and NS are shown in Figs 7.10 and 7.11 respectively. Another useful piece of information on the identity and version is the navigator.userAgent property. Generally speaking, detection is a process to obtain value(s) from the target object. In the next example, you will learn how to use the navigator together with the screen and location objects to build a fully functional detection page on browsers, systems, and Internet networks.

Figure 7.10. Browser detection on IE6 (ex07-06.htm)

graphics/07fig12.gif


Figure 7.11. Detection on NS6

graphics/07fig13.jpg


7.3.2 Browser, system, and network detection

In this section, you will write a Web page to detect different browsers, systems, and networks. This page will also demonstrate how to use buttons to set off different actions. It has three buttons and the detection results are displayed immediately on the same page. For each of these detections, you will build an XHTML table on the fly by using script. This table is represented as a string. The final process is then to output this string to a desirable area by using the innerHTML feature.

To build the tables, the following three script functions are created:



browserDet()   systemDet()   networkDet()

Inside each function there is a script string to incorporate the necessary table and detection elements. For example, the following code fragment ex07-09.txt is used to build the networkDet() function.



Listing: ex07-09.txt

 1:  function networkDet()
 2:  {
 3:   outputMsg = "<table width='600' class='strSt'>" +
 4:    "<tr><td style='color:#008800'>Network Detection:</td>" +
 5:      "<td width='70%'></td></tr>" +
 6:    "<tr><td>location.href</td>" +
 7:       "<td>" + location.href +"</td></tr>" +
     ... ...
     ... ...
20:    "<tr><td>location.protocol</td>" +
21:       "<td>" + location.protocol + "</td></tr>" +
22:    "</table>"
23:   document.getElementById("outId").innerHTML=outputMsg
24:  }

The string outputMsg in lines 322 contains an XHTML table. This string is generated on the fly to obtain the network information through the location object. The innerHTML feature (line 23) is used to output the table to an element with id="outId". If you type the command

http://www.pwt-ex.com/book/chap07/ex07-07.htm?name=author#par01

on the browser's URL bar, the location.href in line 7 will contain the whole command. The location.protocol property in line 21 will have the value "http" as the protocol.

The full listing of this program ex07-07.htm is given below. Figures 7.127.14 show the program at work.



Example ex07-07.htm - Browser, System And Network Detection

 1: <?xml version="1.0" encoding="iso-88591"?>
 2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 3:     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 5: <head><title> Various Detections - ex0707.htm </title></head>
 6: <style>
 7:  h1 {font-family:arial; font-size:16pt; color: red}
 8:  .strSt{font-family:arial;font-size:11pt;color:#0000ff;font-weight:bold}
 9: </style>
10:
11: <script>
12:  var outputMsg
13:  function browserDet()
14:  {
15:   outputMsg = "<table width='600' class='strSt'>" +
16:   "<tr><td style='color:#008800'>Browser Detection:</td>" +
17:      "<td width='60%'></td></tr>" +
18:   "<tr><td>navigator.appCodeName</td>" +
19:      "<td>" + navigator.appCodeName + "</td></tr>" +
20:   "<tr><td>navigator.appName</td>" +
21:      "<td>" + navigator.appName + "</td></tr>" +
22:   "<tr><td>navigator.appVersion</td>" +
23:      "<td>" + navigator.appVersion + "</td></tr>" +
24:   "<tr><td>navigator.cookieEnabled</td>" +
25:      "<td>" + navigator.cookieEnabled + "</td></tr>" +
26:   "<tr><td>navigator.javaEnabled</td>" +
27:      "<td>" + navigator.javaEnabled() + "</td></tr>" +
28:   "<tr><td>navigator.platform</td>" +
29:      "<td>" + navigator.platform + "</td></tr>" +
30:   "<tr><td>navigator.systemLanguage</td>" +
31:      "<td>" + navigator.systemLanguage + "</td></tr>" +
32:   "<tr><td>navigator.userAgent</td>" +
33:      "<td>" + navigator.userAgent + "</td></tr>" +
34:   "<tr><td>navigator.userLanguage</td>" +
35:      "<td>" + navigator.userLanguage + "</td></tr>" +
36:   "</table>"
37:   document.getElementById("outId").innerHTML=outputMsg
38:  }
39:
40:  function systemDet()
41:  {
42:   outputMsg = "<table width='600' class='strSt'>" +
43:   "<tr><td style='color:#008800'>System Detection:</td>" +
44:      "<td width='60%'></td></tr>" +
45:   "<tr><td>screen.height</td>" +
46:      "<td>" +screen.height +"</td></tr>" +
47:   "<tr><td>screen.availHeight</td>" +
48:      "<td>" + screen.availHeight + "</td></tr>" +
49:   "<tr><td>screen.width</td>" +
50:      "<td>" + screen.width + "</td></tr>" +
51:   "<tr><td>screen.availWidth</td>" +
52:      "<td>" + screen.availWidth + "</td></tr>" +
53:   "<tr><td>screen.colorDepth</td>" +
54:      "<td>" + screen.colorDepth + "</td></tr>" +
55:   "<tr><td>screen.fontSmoothingEnabled</td>" +
56:      "<td>" + screen.fontSmoothingEnabled + "</td></tr>" +
57:   "<tr><td>navigator.cpuClass</td>" +
58:      "<td>" + navigator.cpuClass + "</td></tr>" +
59:   "<tr><td>navigator.onLine</td>" +
60:      "<td>" + navigator.onLine + "</td></tr>" +
61:   "<tr><td>history.length</td>" +
62:      "<td>" + history.length + "</td></tr>" +
63:   "</table>"
64:   document.getElementById("outId").innerHTML=outputMsg
65:  }
66:
67:  function networkDet()
68:  {
69:   outputMsg = "<table width='600' class='strSt'>" +
70:    "<tr><td style='color:#008800'>Network Detection:</td>" +
71:      "<td width='70%'></td></tr>" +
72:    "<tr><td>location.href</td>" +
73:      "<td>" + location.href +"</td></tr>" +
74:    "<tr><td>locatin.search</td>" +
75:      "<td>" + location.search + "</td></tr>" +
76:    "<tr><td>location.hash</td>" +
77:      "<td>" + location.hash + "</td></tr>" +
78:    "<tr><td>location.pathname</td>" +
79:      "<td>" + location.pathname + "</td></tr>" +
80:    "<tr><td>location.host</td>" +
81:      "<td>" + location.host + "</td></tr>" +
82:    "<tr><td>location.hostname</td>" +
83:      "<td>" + location.hostname + "</td></tr>" +
84:    "<tr><td>location.port</td>" +
85:      "<td>" + location.port + "</td></tr>" +
86:    "<tr><td>location.protocol</td>" +
87:      "<td>" + location.protocol + "</td></tr>" +
88:    "</table>"
89:   document.getElementById("outId").innerHTML=outputMsg
90:  }
91: </script>
92: <body style="background-color:#cccccc">
93: <div align="center">
94: <h1>Browser, System and Network Detections</h1>
95:   <input type="button" class="strSt" value="Browser"
96:     onclick="browserDet()" />&nbsp&nbsp
97:   <input type="button" class="strSt" value="System"
98:     onclick="systemDet()" />&nbsp&nbsp
99:   <input type="button" class="strSt" value="Network"
100:     onclick="networkDet()" />
101: <br /><br /><div id="outId"></div>
102: </div>
103: </body>
104: </html>

Figure 7.12. Browser detection (ex07-07.htm)

graphics/07fig14.jpg


Figure 7.14. Network detection

graphics/07fig16.jpg


Figure 7.13. System detection

graphics/07fig15.jpg


Next, we will show you how to use the system and network detection results to write browser-dependent codes.

7.3.3 Conditionals depending on browser

If you just want to detect whether a visitor is using an IE browser, the code fragment ex07-10.txt is an efficient conditional:



Listing: ex07-10.txt

1: <body>
2: <script>
3: var IE = document.all?true:false
4: if (IE==true)
5:    document.write("You are using IE type browser")
6:   else
7:     document.write("You are not using IE type browser")
8: </script>
9: </body>

The document.all feature used in line 3 is a conditional statement to identify an IE browser. This method, however, contains no information about other browsers. For a more accurate detection, you can use the indexOf() command (or method) to compare the browser string and perform more specific identity detection. For example, you can use the code ex07-11.txt to detect NS6:



Listing: ex07-11.txt

1: <body>
2: <script>
3:   browserType = navigator.userAgent
4:   if (browserType.indexOf("Netscape6") != -1)
5:     document.write("You are using Netscape6")
6:   else
7:     document.write("You are not using Netscape6")
8:  </script>
9: </body>

The indexOf() function in line 4 is a string comparison function. This function will determine whether the keyword "Netscape6" exists inside the string variable browserType.

If you put in more conditionals such as if statements, you will have a Web page to detect various Web browsers. Consider the example code ex07-08.htm:



Example: ex07-08.htm - Browser Detection II

 1: <?xml version="1.0" encoding="iso88591"?>
 2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 3:     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 5: <head><title> Browser Detection II  ex0708.htm </title></head>
 6:
 7: <style>h3{font-family:arial;font-size:16pt;color:#ffff00}</style>
 8: <body style="background-color:#000088;text-align:center">
 9:  <h3>Conditionals On Browser Version<br /><br />
10:
11: <script>
12: var outMsg="You Are Using An Unknown Browser"
13: var browserT=navigator.appName
14: var versionSt=navigator.appVersion
15: var versionN = navigator.appVersion.charAt(0)
16: if (browserT=="Microsoft Internet Explorer")
17: {
18:  if (versionSt.indexOf("MSIE 6") !=-1)
19:    outMsg="You Are Using MSIE 6.x"
20:  else if (versionSt.indexOf("MSIE 5") !=-1)
21:     outMsg="You Are Using MSIE 5.x"
22:  else if (versionN ==4)
23:     outMsg="You Are Using MS Internet Explorer 4"
24:  else if (versionN < 4)
25:     outMsg="You Are Using MS Internet Explorer 3 or Earlier"
26:  else
27:     outMsg="Please Program Me To Include This Version"
28: }else{
29:  if (browserT=="Netscape")
30:  {
31:    if (navigator.userAgent.indexOf("Netscape6") !=-1)
32:     outMsg="You Are Using Netscape 6.x"
33:    else if (versionN ==4)
34:     outMsg="You Are Using Netscape Version 4.x"
35:    else if (versionN < 4)
36:     outMsg="You Are Using Netscape Version 3.x or Earlier"
37:    else
38:     outMsg="Please Program Me To Include This Version"
39:  }
40: }
41: document.write("<h3>"+outMsg+"</h3>")
42: </script>
43: </body>
44: </html>

This page will detect IE and Netscape browsers along with their different versions. The command navigator.appVersion.charAt(0) in line 15 is used to return the first character of the appVersion. This character (or number) normally stores the version number and helps to identify a range of versions as indicated in lines 22, 24, 33, and 35. This example also contains a message for future versions.

7.3.4 Page redirection depending on browser

If you have Web pages dedicated to some specified browsers and their versions, you can use the redirection technique discussed in section 7.2 to redirect your browser. For example, you can replace the script part (lines 1142) in ex07-08.htm with the script code in ex07-12.txt to form a new example ex07-09.htm. This example will redirect a page depending on the browser. Figures 7.15 and 7.16 show the program at work in NS6 and NS4.x.



Listing: ex07-12.txt - Code Fragment For ex07-09.htm

 1: <script>
 2: var outMsg="You Are Using An Unknown Browser"
 3: var browserT=navigator.appName
 4: var versionSt=navigator.appVersion
 5: var versionN = navigator.appVersion.charAt(0)
 6: if (browserT=="Microsoft Internet Explorer")
 7: {
 8:  if (versionSt.indexOf("MSIE 6") !=-1)
 9:     location.href="ie6x.htm"
10:  else if (versionSt.indexOf("MSIE 5") !=-1)
11:     location.href="ie5x.htm"
12:  else if (versionN ==4)
13:     location.href="ie40.htm"
14:  else if (versionN < 4)
15:     location.href="ieless4.htm"
16:  else
17:     outMsg="Please Program Me To Include This Version"
18: }else{
19:  if (browserT=="Netscape")
20:  {
21:    if (navigator.userAgent.indexOf("Netscape6") !=-1)
22:     location.href="ns6.htm"
23:    else if (versionN ==4)
24:     location.href="ns4x.htm"
25:    else if (versionN < 4)
26:     location.href="nsless4.htm"
27:    else
28:     outMsg="Please Program Me To Include This Version"
29:  }
30: }
31: </script>

Figure 7.15. Browser detection on NS6

graphics/07fig17.jpg


Figure 7.16. Browser detection on NS4.x

graphics/07fig18.gif


7.3.5 International languages and detection

In many practical applications, Web programmers may also need to detect other properties and control the browser accordingly. One such popular application is the international languages issue. XHTML uses the ISO language code (or primary code) and country code (or subcode) pair to identify a particular language and country. For example, "en-gb" represents English in Great Britain. The first two-letter code is the primary code used to specify the language and can be used with the language attribute such as lang="" in XHTML. Some language codes (and their abbreviations) are listed in Table 7.1.

Table 7.1. ISO 639 language abbreviations

en

English

nl

Dutch

ar

Arabic

ja

Japanese

fr

French

el

Greek

he

Hebrew

hi

Hindi

de

German

es

Spanish

ru

Russian

ur

Urdu

it

Italian

pt

Portuguese

zh

Chinese

sa

Sanskrit


Suppose you have two Web pages in different languages, one in French and English, the other in Japanese and English. The following simple example ex07-10.htm will detect the language and redirect the user to the appropriate site.



Example: ex07-10.htm - Language And Detection

 1: <?xml version="1.0" encoding="iso-88591"?>
 2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 3:     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 5: <head><title> Language and Detection - ex0710.htm </title></head>
 6: <body style="background-color:#000088">
 7: <script>
 8:   if (navigator.appName.indexOf("Microsoft")!=-1)
 9:       languageSt=eval("navigator.systemLanguage")
10:   if (navigator.appName.indexOf("Netscape")!=-1)
11:       languageSt=eval("navigator.language")
12:
13:   if (languageSt.indexOf("ja") !=-1)
14:        location.href="japan.htm"
15:   else
16:        location.href="french.htm"
17: </script>
18: </body>
19: </html>

The conditional statements in lines 811 are used to get the language string. If the language string contains the language code "ja" (i.e., Japanese), the code in line 14 will redirect the browser to japan.htm. In all other cases it will load the French and English page called french.htm. Some screen shots of these results are shown in Figs 7.17 and 7.18.

Figure 7.17. French.htm

graphics/07fig19.jpg


Figure 7.18. Japan.htm

graphics/07fig20.jpg


In some cases, you may need to turn on the encoding environment of your browser to see the special country encoding (e.g., the Japanese character set). The main body code for this example, japan.htm, is listed in ex07-13.txt.



Listing: ex07-13.txt - Code Fragment For japan.htm

 1: <style>h3{font-family:arial;font-size:18pt;color:#ffff00}
 2:      h2{font-family:arial;font-size:18pt;color:#00ffff}
 3:   .butSt{font-family:arial;font-size:14pt;color:#008800;width:200}
 4: </style>
 5: <body style="background-color:#000088;text-align:center">
 6: <br /><br />
 7: <h3>graphics/07equ01.gif<br /><br /></h3>
 8: <h2>Thank you very much for <br />
 9:   visiting our web site.<br /><br /></h2><br />
10: <h3>Language Available:</h3>
11: <input type="button" class="butSt" value="Japanese & English"
12:      onclick="location.href='japan.htm'" />
13: <input type="button" class="butSt" value="French & English"
14:      onclick="location.href='french.htm'" />
15: </body>

7.3.6 Controlling browser size and hostname with detection

The main advantage of detection is to be able to control and ensure that the right design goes to the right browser. Our next example shows how to detect the screen resolution and change the browser window to half of its screen size. The properties screen.availWidth and screen.availHeight are used to get the screen width and height size. Then the window resize method (or function) window.resizeTo(width,height) is used to resize the browser. In this example, we also use the location.hostname to get the host of the page. A message is displayed if the user gets this page from another provider or source (see listing ex07-11.htm).



Example: ex07-11.htm - Detect And Control Screen Size & Hostname

 1: <?xml version="1.0" encoding="iso-88591"?>
 2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 3:     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 5: <head><title> Screen Size & Hostname - ex0711.htm </title></head>
 6: <body style="background-color:#000088;text-align:center;
 7:      font-family:arial;font-size:16pt;color:#ffff00">
 8: <script>
 9:  var winWidth=Math.floor(screen.availWidth 2)
10:  var winHeight=Math.floor(screen.availHeight 2)
11:      window.resizeTo(winWidth,winHeight)
12:
13:   if (location.hostname != "www.pwt-ex.com")
14:      outMsg="Please Get This Page From www.pwt-ex.com"
15:   else
16:      outMsg="This Page Is From www.pwt-ex.com"
17:
18:   document.write("<br />The Available Screen Resolution = " +
19:       screen.availWidth+" * "+ screen.availHeight)
20:   document.write("<br />The Browser Window Resize To = " +
21:       winWidth+" * "+ winHeight+"<br /><br />")
22:   document.write("The Detected Hostname is "+location.hostname)
23:   document.write("<br />"+outMsg)
24: </script>
25: </body>
26: </html>

The winWidth in line 9 is a variable used to store the integer part (Math.floor) of half the screen width. Together with the variable winHeight, you can resize the window to a desirable size as indicated in line 11. The conditional statement in line 13 is used to detect the hostname. Lines 1823 are used to output the message on the page.

If you obtain this page from location www.pwt-ex.com, the detection code in lines 1314 will have the screen display as shown in Fig. 7.19. If you obtain this page from any other Internet source, e.g., www.isp.com, you will have the display as shown in Fig. 7.20.

Figure 7.19. An authorized page (ex07-11.htm)

graphics/07fig21.jpg


Figure 7.20. An unauthorized page

graphics/07fig22.jpg


For some browser software, the function document.write() may output the message to a new page. This will destroy most of the original settings including the page itself and its style. In practice, programmers may like to output messages to a dedicated area (or element) and keep the same Web page settings. For keeping the page settings and delivering XHTML messages anywhere you want, you may prefer to use the non-standard feature innerHTML (supported by both IE and NS) to perform the task. For example, the following code fragment ex07-14.txt can be used to do the same job as in ex07-11.htm.



Listing: ex07-14.txt - Code Fragment For ex07-12.htm

 1: <body style="background-color:#000088;text-align:center;
 2:       font-family:arial;font-size:16pt;color:#ffff00">
 3: <script>
 4:  var winWidth=Math.floor(screen.availWidth/2)
 5:  var winHeight=Math.floor(screen.availHeight/2)
 6:      window.resizeTo(winWidth,winHeight)
 7:   if (location.hostname != "www.pwt-ex.com")
 8:      outMsg="Please Get This Page From www.pwt-ex.com"
 9:   else
10:      outMsg="This Page Is From www.pwt-ex.com"
11: </script><br /><br />
12:
13:   <div id="detectScnSize"></div><br />
14:   <div id="detectHost"></div>
15:
16: <script>
17:  document.getElementById("detectScnSize").innerHTML=
18:    "The Available Screen Revolution = " +
19:    screen.availWidth+ " * " + screen.availHeight +
20:    "<br />The Browser Window Resize To =" +winWidth+ " * "+ winHeight
21:  document.getElementById("detectHost").innerHTML=
22:    "The Detected Hostname is "+location.hostname+"<br />"+outMsg
23: </script>
24: </body>

This code fragment uses the same window resize and hostname detection (lines 410). After that, two division elements are created for output. Finally, the example uses the getElementById feature to locate the element and output the message as required.

Please note that two separate sets of script are used here. The order of the scripts is important. If you arrange the second set of script, lines 1623, before line 13, you will output the message to some unknown elements.

    Table of Contents

    Previous Next