`

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

分享到:
评论

相关推荐

    基于js判断浏览器是否支持webGL.docx

    "基于js判断浏览器是否支持webGL" 基于JavaScript判断浏览器是否支持WebGL是Web开发中一个非常重要的知识点。WebGL(Web Graphics Library)是一种基于浏览器的图形库,允许开发者使用JavaScript编写三维图形应用...

    JavaScript判断浏览器类型及版本

    JavaScript 判断浏览器类型及版本 随着浏览器市场的日益繁荣,浏览器的类型和版本也越来越多,给前端开发带来了很大的挑战。如何精准地判断浏览器的类型和版本成为了前端开发中非常重要的一个问题。 JavaScript ...

    判断浏览器类型(判断浏览器类型)

    在网页开发中,判断浏览器类型是一项重要的任务,因为不同的浏览器可能会有不同的兼容性问题。了解用户正在使用的浏览器可以帮助开发者针对性地优化网站,确保在各种环境下都能提供良好的用户体验。本文将详细介绍...

    JS判断浏览器之Navigator对象.pdf

    ### JS判断浏览器之Navigator对象 #### 一、Navigator对象简介 在JavaScript中,`navigator`对象提供了关于用户浏览器的信息。这个对象包含了多个属性,能够帮助开发者了解用户的浏览器类型及其版本等重要信息。这...

    非常详细的JS判断浏览器的版本和型号

    ### JS判断浏览器的版本和型号 #### 知识点概览 本文将详细介绍如何通过JavaScript来判断用户所使用的浏览器类型及版本。此方法能够有效识别市面上主流浏览器,并针对Internet Explorer的不同版本进行具体区分。 ...

    js判断浏览器类型,返回浏览器类型名称.

    因此,更推荐使用`navigator`对象的其他属性,比如`navigator.appName`或`navigator.product`,以及现代浏览器提供的`Feature Detection`技术,如`Modernizr`库,来判断浏览器特性而不是仅仅依赖于浏览器名称。...

    微信判断浏览器自动弹出遮罩层代码

    标题"微信判断浏览器自动弹出遮罩层代码"涉及到的核心知识点包括: 1. **浏览器检测**:首先,我们需要通过JavaScript来检测当前的浏览器环境。常见的方法是检查UserAgent字符串,微信内置浏览器的UserAgent通常...

    CSS or PHP判断浏览器源代码

    首先,我们来看CSS判断浏览器的方法。虽然CSS主要用于样式控制,但有些特定的CSS属性或技巧可以用来间接识别浏览器。例如: 1. **User-Agent String**: CSS不能直接访问用户代理(User-Agent)字符串,但可以通过...

    得到浏览器尺寸,判断浏览器内核

    其次,判断浏览器内核通常需要检查浏览器提供的`navigator`对象。例如,`navigator.userAgent`属性包含了关于浏览器的详细信息,其中包含了浏览器名称、版本和操作系统等。通过分析这个字符串,可以识别出如Chrome的...

    js判断浏览器的环境(pc端,移动端,还是微信浏览器)

    首先,要判断浏览器环境,我们通常会使用`window.navigator.userAgent`这个属性。`userAgent`属性可以获取到当前浏览器的用户代理字符串,该字符串中包含了浏览器的类型、版本、操作系统的相关信息。通过匹配这个...

    jquery1.9判断浏览器类型和版本

    总的来说,虽然jQuery 1.9移除了`$.browser`,但通过JavaScript的`navigator`对象,我们仍然可以有效地判断浏览器类型和版本。使用这种方法时,要注意保持代码的可维护性和兼容性,避免过于依赖特定浏览器的行为。...

    JS判断浏览器类型与版本

    navigator对象是浏览器提供的一个全局对象,包含了有关浏览器的信息。 1. **navigator.userAgent** `navigator.userAgent` 是一个字符串,它包含了关于用户代理(即浏览器)的信息,包括浏览器的名称、版本号以及...

    jQuery判断浏览器版本过低提示代码

    标题中的"jQuery判断浏览器版本过低提示代码"是指使用jQuery来检测用户浏览器的版本,并在浏览器版本不符合要求时显示警告信息。这种做法有助于提高用户体验,因为它可以引导用户升级到支持更多现代Web技术的浏览器...

    判断浏览器版本Js,浏览器兼容

    我们可以据此来判断浏览器的类型和版本。 以下是一个简单的示例,展示如何检测浏览器类型: ```javascript function getBrowserType() { var userAgent = navigator.userAgent; if (userAgent.indexOf("Firefox...

    判断浏览器版本及类型

    此段代码通过读取`navigator.userAgent`属性来获取浏览器信息,并通过正则表达式匹配来判断浏览器类型和版本。具体来说: - **`navigator.userAgent`**:返回一个字符串,表示当前浏览器的用户代理头(User-Agent ...

    js判断浏览器

    接下来,我们通过一个简单的示例函数来演示如何根据`navigator.userAgent`来判断浏览器类型: ```javascript function getExplorer() { var explorer = window.navigator.userAgent; // 检测 Internet Explorer ...

    判断浏览器内核.zip

    本资料包“判断浏览器内核.zip”主要聚焦于使用JavaScript来检测用户浏览器的内核类型。核心知识点包括: 1. **UserAgent字符串**:在JavaScript中,`navigator.userAgent`属性提供了关于用户浏览器的信息,它是一...

    JS判断打开网页的浏览器类型与版本

    例如,使用 `navigator.userAgent.indexOf("MSIE")&gt;0` 方法可以判断浏览器是否为 IE。 此外,我们还可以使用 `navigator.appName` 属性来判断浏览器类型。例如,使用 `navigator.appName.indexOf("Microsoft") != -...

Global site tag (gtag.js) - Google Analytics