logo头像

求知若渴,虚心若愚

浏览器 - JavaScript区分浏览器

浏览器区分

在许多情况下,值判断出浏览器类型之后,还需判断浏览器版本才能处理兼容性问题,而判断浏览器的版本一般只能通过分析浏览器的userAgent才能知道

userAgent

  • userAgent 属性是一个只读的字符串,声明了浏览器用于 HTTP 请求的用户代理头的值
  • 一般来讲,它是在 navigator.appCodeName 的值之后加上斜线和 navigator.appVersion 的值构成的
  • 访问:navigator.userAgent

判断浏览器类型

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
// 判断打开的浏览器 电脑版本的safari不支持
var Navigator = navigator.userAgent;

var Chrome = Navigator.match(/Chrome/i) != null && Navigator.match(/Version\/\d+\.\d+(\.\d+)?\sChrome\//i) == null ? true : false;

var Android = (Navigator.match(/(Android);?[\s\/]+([\d.]+)?/)) ? true : false;

var iPad = (Navigator.match(/(iPad).*OS\s([\d_]+)/)) ? true : false;

var iPhone = (!iPad && Navigator.match(/(iPhone\sOS)\s([\d_]+)/)) ? true : false;

var Safari = (iPhone || iPad) && Navigator.match(/Safari/);

var version = 0;
Safari && (version = Navigator.match(/Version\/([\d\.]+)/));
// safari浏览器版本
version = parseFloat(version[1], 10);

// 是否从微信打开
var Weixin = navigator.userAgent.indexOf("MicroMessenger") >= 0; // weixin

// 使用
if(Android) {
if(weixin) {
// 微信浏览器
} else {
// 非微信浏览器
}
}
if(iPhone) {
if(weixin) {
// 微信中
} else {
// 不是微信中
}
}

TIP

  • 这里要判断微信的原因:
    • 微信中打开App是有限制的,但是我们经常做的功能可能就是浏览器打开App
    • 这个时候在微信中是无法打开的,所以需要判断,在微信中一般提示用户打开浏览器,通过浏览器再打开App
    • 如果不是微信中,直接打开App即可

判断浏览器版本

参考文章:JavaScript判断浏览器类型及版本

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var Sys = {};
var ua = navigator.userAgent.toLowerCase();
var s;
(s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] :
(s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] :
(s = ua.match(/chrome\/([\d.]+)/)) ? Sys.chrome = s[1] :
(s = ua.match(/opera.([\d.]+)/)) ? Sys.opera = s[1] :
(s = ua.match(/version\/([\d.]+).*safari/)) ? Sys.safari = s[1] : 0;

//以下进行测试
if (Sys.ie) document.write('IE: ' + Sys.ie);
if (Sys.firefox) document.write('Firefox: ' + Sys.firefox);
if (Sys.chrome) document.write('Chrome: ' + Sys.chrome);
if (Sys.opera) document.write('Opera: ' + Sys.opera);
if (Sys.safari) document.write('Safari: ' + Sys.safari);
  • 效果图(chrome,火狐,safari测试通过)

支付宝打赏 微信打赏

赞赏是对我们的肯定!