navigator 判断浏览器

The navigator object

The navigator object was conceived back in the days when Netscape Navigator reined supreme. These days it serves as much as an irony of NS's diminished market share as way of probing browser information.

The navigator object of JavaScript contains the following core properties:

Properties Description

appCodeName	The code name of the browser.
appName	The name of the browser (ie: Microsoft Internet Explorer ).
appVersion	Version information for the browser (ie: 4.75 [en] (Win98; U) ).
cookieEnabled	Boolean that indicates whether the browser has cookies enabled.
language	Returns the default language of the browser version (ie: en-US ). NS and Firefox only.
mimeTypes[]	An array of all MIME types supported by the client. NS and Firefox only.
platform[]	The platform of the client's computer (ie: Win32 ).
plugins	An array of all plug-ins currently installed on the client. NS and Firefox only.
systemLanguage	Returns the default language of the operating system (ie: en-us ). IE only.
userAgent	String passed by browser as user-agent header. (ie: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1) )
userLanguage	Returns the preferred language setting of the user (ie: en-ca ). IE only.

Let's see exactly what these properties reveal of the browser you're currently using :

<!----> <script type="text/javascript"> with (document){ write("<b>appCodeName:</b> "+navigator.appCodeName+"<br />") write("<b>appName:</b> "+navigator.appName+"<br />") write("<b>appVersion:</b> "+navigator.appVersion+"<br />") write("<b>userAgent:</b> "+navigator.userAgent+"<br />") write("<b>platform:</b> "+navigator.platform+"<br />") } </script> appCodeName: Mozilla
appName: Netscape
appVersion: 5.0 (Windows; en-US)
userAgent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.0.3) Gecko/2008092417 Firefox/3.0.3
platform: Win32
<!---->

At a glance

At a glance at the above table, you may be swayed towards turning to the following two properties to do your browser detection bidding:

navigator.appName
navigator.appVersion

After all, you are trying to detect a browser's name and version right? However, they both will most likely mislead you. In browsers such as various versions of Netscape and Firefox, these two properties return simply "Netscape" for appName , and 5.0 for appVersion without any further distinction for Firefox and its version, and hence are pretty much useless in the real world. For example, in both Firefox 1.x and Firefox 2.x, these two properties return:

appName:
 Netscape
appVersion:
 5.0 (Windows; en-US)

We need to turn to a property that's more thorough in its investigative work if we want more consistency and accuracy, and that turns out to be navigator.userAgent .

Detecting Firefox x.x

In Firefox 2.0.0.13 for example, the userAgent property reads:

UserAgent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.13) Gecko/20080311 Firefox/2.0.0.13

The detail we're interested in apparently lies at the very end, or Firefox/2.0.0.13 . Different versions of Firefox will contain a different version number, but the pattern is consistent enough. The part we're interested in occurs after the string "Firefox/ ", or the exact version number. There are many ways to get to it using either standard String or RegExp methods- I'm opting for the later here:

<script type="text/javascript">

if (/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent)){ //test for Firefox/x.x or Firefox x.x (ignoring remaining digits);
 var ffversion=new Number(RegExp.$1) // capture x.x portion and store as a number
 if (ffversion>=3)
  document.write("You're using FF 3.x or above")
 else if (ffversion>=2)
  document.write("You're using FF 2.x")
 else if (ffversion>=1)
  document.write("You're using FF 1.x")
}
else
 document.write("n/a")

</script>

Output: <!----> <script type="text/javascript"> if (/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent)){ //test for Firefox/x.x or Firefox x.x (ignoring remaining digits);  var ffversion=new Number(RegExp.$1) // capture x.x portion and store as a number  if (ffversion>=3)   document.write("You're using FF 3.x or above")  else if (ffversion>=2)   document.write("You're using FF 2.x")  else if (ffversion>=1)   document.write("You're using FF 1.x") } else  document.write("n/a") </script> You're using FF 3.x or above<!---->

Basically, I'm capturing just the versonMajor.versionMinor portion of the full version number of Firefox (ie: 2.0.0.13 becomes simply 2.0), and using that as basis to detect the various versions of Firefox. Delving any deeper, and the returned version may no longer be a number but a string (ie: 2.0.0), which makes numeric comparisons cumbersome.

Detecting IE x.x

In IE 7.0 for example, the userAgent property reads:

UserAgent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; .NET CLR 2.0.50727)

So the part we're interested in lies in the middle, or MSIE 7.0; . If you try a shortcut and use parseFloat on the entire string to get to the 7.0 portion, it won't work. This is due to the way parseFloat works- by returning the first number it encounters, which in this case is 4.0. Once again we need to use either standard String or RegExp methods again to get to the actual version number; below I'm using RegExp as well:

<script type="text/javascript">

if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)){ //test for MSIE x.x;
 var ieversion=new Number(RegExp.$1) // capture x.x portion and store as a number
 if (ieversion>=8)
  document.write("You're using IE8 or above")
 else if (ieversion>=7)
  document.write("You're using IE7.x")
 else if (ieversion>=6)
  document.write("You're using IE6.x")
 else if (ieversion>=5)
  document.write("You're using IE5.x")
}
else
 document.write("n/a")
</script>

Output: <!----> <script type="text/javascript"> if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)){ //test for MSIE x.x;  var ieversion=new Number(RegExp.$1) // capture x.x portion and store as a number  if (ieversion>=8)   document.write("You're using IE8 or above")  else if (ieversion>=7)   document.write("You're using IE7.x")  else if (ieversion>=6)   document.write("You're using IE6.x")  else if (ieversion>=5)   document.write("You're using IE5.x") } else  document.write("n/a") </script> n/a<!---->

Detecting Opera x.x

Detecting Opera using the navigator object at first appears to be tricky business due to the browser's identity crisis. You see, Opera 8 and below by default identifies itself as IE6 (or lower) in the navigator object. Users can override this setting under "Edit Site Settings " in the toolbar to identify as Opera or even another browser instead. Starting in Opera 9, the browser regains its confidence and identifies by default as itself, Opera, though users can still modify this setting manually in the toolbar. The bottom line is, Opera can appear as either Opera, Internet Explorer, or another browser within a designated list in the navigator object.

Lets take a look at what navigator.userAgent in Opera 8.5 returns depending on what it has chosen to identify itself as (whether automatically or manually):

As IE6: Mozilla/4.0 (compatible; MSIE 6.0; Windows XP) Opera 8.5 [en]
As Moz5: Mozilla/5.0 (Windows XP; U) Opera 8.5 [en]
As Opera: Opera/8.5 (Windows XP; U) [en]

Notice how if it's set to identify as IE, MSIE 6.0 appears within the string, while if set to identify as Mozilla, Mozilla/5.0 appears instead. As Opera itself, Opera/8.5 appears. In all three cases, the one commonality that we can exploit to actually detect Opera and its true version regardless of which identify it's decided to take on is the string "Opera x.x " or "Opera/x.x " within navigator.userAgent . In other words, there are two versions of the target string we need to be aware of. With that said, here's how you might go about testing for a specific version of Opera, which turns out to be no different than the technique used for detecting, say, Firefox:

<script type="text/javascript">
//Note: userAgent in Opera9.24 WinXP returns: Opera/9.24 (Windows NT 5.1; U; en)
//         userAgent in Opera 8.5 (identified as IE) returns: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1) Opera 8.50 [en]
//         userAgent in Opera 8.5 (identified as Opera) returns: Opera/8.50 (Windows NT 5.1; U) [en]

if (/Opera[\/\s](\d+\.\d+)/.test(navigator.userAgent)){ //test for Opera/x.x or Opera x.x (ignoring remaining decimal places);
 var oprversion=new Number(RegExp.$1) // capture x.x portion and store as a number
 if (oprversion>=10)
  document.write("You're using Opera 10.x or above")
 else if (oprversion>=9)
  document.write("You're using Opera 9.x")
 else if (oprversion>=8)
  document.write("You're using Opera 8.x")
 else if (oprversion>=7)
  document.write("You're using Opera 7.x")
 else
  document.write("n/a")
}
else
 document.write("n/a")
</script>

Output: <!----> <script type="text/javascript"> //Note: userAgent in Opera9.24 WinXP returns: Opera/9.24 (Windows NT 5.1; U; en) // userAgent in Opera 8.5 (identified as IE) returns: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1) Opera 8.50 [en] // userAgent in Opera 8.5 (identified as Opera) returns: Opera/8.50 (Windows NT 5.1; U) [en] if (/Opera[\/\s](\d+\.\d+)/.test(navigator.userAgent)){ //test for Opera/x.x or Opera x.x (ignoring remaining decimal places);  var oprversion=new Number(RegExp.$1) // capture x.x portion and store as a number  if (oprversion>=10) document.write("You're using Opera 10.x or above")  else if (oprversion>=9) document.write("You're using Opera 9.x")  else if (oprversion>=8) document.write("You're using Opera 8.x")  else if (oprversion>=7) document.write("You're using Opera 7.x")  else document.write("n/a") } else  document.write("n/a") </script> n/a