javascript 检测浏览器类型和版本的代码_javascript技巧

检测浏览器及其版本的代码

复制代码 代码如下:

getBrowser : function(){
var browser = {
msie: false, firefox: false, opera: false, safari: false,
chrome: false, netscape: false, appname: 'unknown', version: 0
},
userAgent = window.navigator.userAgent.toLowerCase();
if ( /(msie|firefox|opera|chrome|netscape)\D+(\d[\d.]*)/.test( userAgent ) ){
browser[RegExp.$1] = true;
browser.appname = RegExp.$1;
browser.version = RegExp.$2;
} else if ( /version\D+(\d[\d.]*).*safari/.test( userAgent ) ){ // safari
browser.safari = true;
browser.appname = 'safari';
browser.version = RegExp.$2;
}
return browser.appname + browser.version;
}

对象/特征检测法

该方法是一种判断浏览器能力（而非浏览器的确切型号）的通用方法。大部分JS专家认为这个方法最合适，因为他们认为按照该方法所编写的脚本是经得起未来考验的。

<span style="COLOR: green">//获取IE浏览器的版本号</span>

<span style="COLOR: green">//返回数值，显示IE的主版本号</span>

<span style="COLOR: blue">function </span>getIEVer() {

 <span style="COLOR: blue">var </span>ua = navigator.userAgent; <span style="COLOR: green">//获取用户端信息</span>

<span style="COLOR: green"> </span><span style="COLOR: blue">var </span>b = ua.indexOf(<span style="COLOR: #a31515">"MSIE "</span>); <span style="COLOR: green">//检测特殊字符串"MSIE "的位置</span>

<span style="COLOR: green"> </span><span style="COLOR: blue">if </span>(b <pre style="PADDING-RIGHT: 0px! important; PADDING-LEFT: 12px! important; PADDING-BOTTOM: 0px! important; MARGIN: 0em; COLOR: black; WORD-BREAK: normal; LINE-HEIGHT: 18px; PADDING-TOP: 0px! important; BACKGROUND-COLOR: #f7f7ff! important; WORD-WRAP: break-word">  <span style="COLOR: blue">return </span>0;

 }

 <span style="COLOR: blue">return </span>parseFloat(ua.substring(b + 5, ua.indexOf(<span style="COLOR: #a31515">";"</span>, b))); <span style="COLOR: green">//截取版本号字符串，并转换为数值</span>

}

alert(getIEVer()); <span style="COLOR: green">//返回数值8(我的IE8)</span>

如果更关注浏览器的能力而不在乎它实际的身份，就可以使用这种方法。

user-agent字符串检测法

user-agent字符串提供了关于Web浏览器的大量信息，包括浏览器的名称和版本。

<span style="COLOR: blue">var </span>ua = navigator.userAgent.toLowerCase(); <span style="COLOR: green">//获取用户端信息</span>

<span style="COLOR: blue">var </span>info = {

 ie: /msie/.test(ua) && !/opera/.test(ua),  <span style="COLOR: green">//匹配IE浏览器</span>

<span style="COLOR: green"> </span>op: /opera/.test(ua),  <span style="COLOR: green">//匹配Opera浏览器</span>

<span style="COLOR: green"> </span>sa: /version.*safari/.test(ua),  <span style="COLOR: green">//匹配Safari浏览器</span>

<span style="COLOR: green"> </span>ch: /chrome/.test(ua),  <span style="COLOR: green">//匹配Chrome浏览器</span>

<span style="COLOR: green"> </span>ff: /gecko/.test(ua) && !/webkit/.test(ua)  <span style="COLOR: green">//匹配Firefox浏览器</span>

};

(info.ie) && alert(<span style="COLOR: #a31515">"IE浏览器"</span>);

(info.op) && alert(<span style="COLOR: #a31515">"Opera浏览器"</span>);

(info.sa) && alert(<span style="COLOR: #a31515">"Safari浏览器"</span>);

(info.ff) && alert(<span style="COLOR: #a31515">"Firefox浏览器"</span>);

(info.ch) && alert(<span style="COLOR: #a31515">"Chrome浏览器"</span>);

通常我们做得最多的,就是判断是否是IE了,其它几种浏览器一般都会符合标准.有些客户只需要符合IE和FF就已经满足了.那么我们可以这样做:

<span style="COLOR: blue">var </span>isIE = (navigator.appName == <span style="COLOR: #a31515">"Microsoft Internet Explorer"</span>);

判断IE远远不止上面一种方法,可以使用IE更多特有的东西,如:window.ActiveXObject,document.all等,这些都属于对象/特征检测法了!通常要在不同的浏览器上写不同的样式(因为IE样式解析也各有不同),那就得判断版本了.可以这样做

<span style="COLOR: green">//获取IE浏览器的版本号</span>

<span style="COLOR: green">//返回数值，显示IE的主版本号</span>

<span style="COLOR: blue">function </span>getIEVer() {

 <span style="COLOR: blue">var </span>ua = navigator.userAgent; <span style="COLOR: green">//获取用户端信息</span>

<span style="COLOR: green"> </span><span style="COLOR: blue">var </span>b = ua.indexOf(<span style="COLOR: #a31515">"MSIE "</span>); <span style="COLOR: green">//检测特殊字符串"MSIE "的位置</span>

<span style="COLOR: green"> </span><span style="COLOR: blue">if </span>(b <pre style="PADDING-RIGHT: 0px! important; PADDING-LEFT: 12px! important; PADDING-BOTTOM: 0px! important; MARGIN: 0em; COLOR: black; WORD-BREAK: normal; LINE-HEIGHT: 18px; PADDING-TOP: 0px! important; BACKGROUND-COLOR: #f7f7ff! important; WORD-WRAP: break-word">  <span style="COLOR: blue">return </span>0;

 }

 <span style="COLOR: blue">return </span>parseFloat(ua.substring(b + 5, ua.indexOf(<span style="COLOR: #a31515">";"</span>, b))); <span style="COLOR: green">//截取版本号字符串，并转换为数值</span>

}

alert(getIEVer()); <span style="COLOR: green">//返回数值7</span>

检测操作系统:

<span style="COLOR: blue">var </span>isWin = (navigator.userAgent.indexOf(<span style="COLOR: #a31515">"Win"</span>) != -1); <span style="COLOR: green">//如果是Windows系统，则返回true</span>

<span style="COLOR: blue">var </span>isMac = (navigator.userAgent.indexOf(<span style="COLOR: #a31515">"Mac"</span>) != -1);  <span style="COLOR: green">//如果是Macintosh系统，则返回true</span>

<span style="COLOR: blue">var </span>isUnix = (navigator.userAgent.indexOf(<span style="COLOR: #a31515">"X11"</span>) != -1);  <span style="COLOR: green">//如果是Unix系统，则返回true</span>

<span style="COLOR: blue">var </span>isLinux = (navigator.userAgent.indexOf(<span style="COLOR: #a31515">"Linux"</span>) != -1);  <span style="COLOR: green">//如果是Linux系统，则返回true</span>

文章大部分内容来自于《Javascript征途》