Home > Web Front-end > JS Tutorial > body text

javascript code to detect browser type and version_javascript skills

WBOY
Release: 2016-05-16 18:46:19
Original
1016 people have browsed it
Code to detect the browser and its version
Copy the code The code is as follows:

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 ( / versionD (d[d.]*).*safari/.test( userAgent ) ){ // safari
browser.safari = true;
browser.appname = 'safari';
browser.version = RegExp.$2;
}
return browser.appname browser.version;
}

Object/feature detection method

This method is a general way to determine the capabilities of a browser (rather than the exact model of the browser). Most JS experts consider this approach the most appropriate because they believe scripts written this way are future-proof.

<span style="COLOR: green">//获取IE浏览器的版本号</span>
Copy after login
Copy after login
<span style="COLOR: green">//返回数值,显示IE的主版本号</span>
Copy after login
Copy after login
<span style="COLOR: blue">function </span>getIEVer() {
Copy after login
Copy after login
 <span style="COLOR: blue">var </span>ua = navigator.userAgent; <span style="COLOR: green">//获取用户端信息</span>
Copy after login
Copy after login
<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>
Copy after login
Copy after login
<span style="COLOR: green"> </span><span style="COLOR: blue">if </span>(b < 0) {
Copy after login
Copy after login
  <span style="COLOR: blue">return </span>0;
Copy after login
Copy after login
 }
Copy after login
Copy after login
 <span style="COLOR: blue">return </span>parseFloat(ua.substring(b + 5, ua.indexOf(<span style="COLOR: #a31515">";"</span>, b))); <span style="COLOR: green">//截取版本号字符串,并转换为数值</span>
Copy after login
Copy after login
}
Copy after login
Copy after login
Copy after login
Copy after login
alert(getIEVer()); <span style="COLOR: green">//返回数值8(我的IE8)</span>
Copy after login

Use this method if you are more concerned about the capabilities of the browser than its actual identity.

user-agent string detection method

The user-agent string provides a wealth of information about the web browser, including the browser's name and version.

<span style="COLOR: blue">var </span>ua = navigator.userAgent.toLowerCase(); <span style="COLOR: green">//获取用户端信息</span>
Copy after login
<span style="COLOR: blue">var </span>info = {
Copy after login
 ie: /msie/.test(ua) && !/opera/.test(ua),  <span style="COLOR: green">//匹配IE浏览器</span>
Copy after login
<span style="COLOR: green"> </span>op: /opera/.test(ua),  <span style="COLOR: green">//匹配Opera浏览器</span>
Copy after login
<span style="COLOR: green"> </span>sa: /version.*safari/.test(ua),  <span style="COLOR: green">//匹配Safari浏览器</span>
Copy after login
<span style="COLOR: green"> </span>ch: /chrome/.test(ua),  <span style="COLOR: green">//匹配Chrome浏览器</span>
Copy after login
<span style="COLOR: green"> </span>ff: /gecko/.test(ua) && !/webkit/.test(ua)  <span style="COLOR: green">//匹配Firefox浏览器</span>
Copy after login
};
Copy after login
(info.ie) && alert(<span style="COLOR: #a31515">"IE浏览器"</span>);
Copy after login
(info.op) && alert(<span style="COLOR: #a31515">"Opera浏览器"</span>);
Copy after login
(info.sa) && alert(<span style="COLOR: #a31515">"Safari浏览器"</span>);
Copy after login
(info.ff) && alert(<span style="COLOR: #a31515">"Firefox浏览器"</span>);
Copy after login
(info.ch) && alert(<span style="COLOR: #a31515">"Chrome浏览器"</span>);
Copy after login

Usually what we do the most is to determine whether it is IE. Other browsers generally meet the standards. Some customers only need to comply with IE and FF. Then we can do this:

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

Judging IE is far more than the above method. You can use more unique things of IE, such as: window.ActiveXObject, document.all, etc. These are all object/feature detection methods! Usually they need to be used in different browsers. If you write different styles (because IE style parsing is also different), then you have to judge the version. You can do this

<span style="COLOR: green">//获取IE浏览器的版本号</span>
Copy after login
Copy after login
<span style="COLOR: green">//返回数值,显示IE的主版本号</span>
Copy after login
Copy after login
<span style="COLOR: blue">function </span>getIEVer() {
Copy after login
Copy after login
 <span style="COLOR: blue">var </span>ua = navigator.userAgent; <span style="COLOR: green">//获取用户端信息</span>
Copy after login
Copy after login
<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>
Copy after login
Copy after login
<span style="COLOR: green"> </span><span style="COLOR: blue">if </span>(b < 0) {
Copy after login
Copy after login
  <span style="COLOR: blue">return </span>0;
Copy after login
Copy after login
 }
Copy after login
Copy after login
 <span style="COLOR: blue">return </span>parseFloat(ua.substring(b + 5, ua.indexOf(<span style="COLOR: #a31515">";"</span>, b))); <span style="COLOR: green">//截取版本号字符串,并转换为数值</span>
Copy after login
Copy after login
}
Copy after login
Copy after login
Copy after login
Copy after login
alert(getIEVer()); <span style="COLOR: green">//返回数值7</span>
Copy after login

Detect operating system:

<span style="COLOR: blue">var </span>isWin = (navigator.userAgent.indexOf(<span style="COLOR: #a31515">"Win"</span>) != -1); <span style="COLOR: green">//如果是Windows系统,则返回true</span>
Copy after login
<span style="COLOR: blue">var </span>isMac = (navigator.userAgent.indexOf(<span style="COLOR: #a31515">"Mac"</span>) != -1);  <span style="COLOR: green">//如果是Macintosh系统,则返回true</span>
Copy after login
<span style="COLOR: blue">var </span>isUnix = (navigator.userAgent.indexOf(<span style="COLOR: #a31515">"X11"</span>) != -1);  <span style="COLOR: green">//如果是Unix系统,则返回true</span>
Copy after login
<span style="COLOR: blue">var </span>isLinux = (navigator.userAgent.indexOf(<span style="COLOR: #a31515">"Linux"</span>) != -1);  <span style="COLOR: green">//如果是Linux系统,则返回true</span>
Copy after login

Most of the content of the article comes from "Javascript Journey"

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template