判断用户浏览器

判断用户所使用的浏览器主要用到的 api 是navigator.userAgent,这是一个只读的字符串,声明了浏览器用于 HTTP 请求的用户代理头的值,不同浏览器的userAgent值都不相同,所以我们可以根据这个字符串来判断用户是从哪个浏览器进入

判断方式:

下面两个是刚做的 demo 获取的值,仔细观察下面两个字符串,会发现有些值是不一样的,并且浏览器特有的,依据这个我们就可以作为不同浏览器的判断条件。

QQ 内置浏览器的 userAgent 值:

mozilla/5.0 (iphone; cpu iphone os 11_1_2 like mac os x) applewebkit/604.3.5 (khtml, like gecko) mobile/15b202 qq/7.5.8.422 v1_iph_sq_7.5.8_1_app_a pixel/1080 core/uiwebview device/apple(iphone 8plus) nettype/wifi qbwebviewtype/1

微信内置浏览器的 userAgent 值:

mozilla/5.0 (iphone; cpu iphone os 11_1_2 like mac os x) applewebkit/604.3.5 (khtml, like gecko) mobile/15b202 micromessenger/6.6.6 nettype/wifi language/zh_cn

示例:判断QQ和微信内置浏览器

使用方式,直接使用这个 api 读取值,然后根据事先观察userAgent字符串的不同之处来判断:

let url = navigator.userAgent.toLowerCase();
//使用toLowerCase将字符串全部转为小写 方便我们判断使用
if (url.indexOf('15b202 qq') > -1) {
  //单独判断QQ内置浏览器
  alert('QQ APP 内置浏览器,做你想做的操作');
}
if (url.indexOf('micromessenger') > -1) {
  //单独判断微信内置浏览器
  alert('微信内置浏览器,做你想做的操作');
}
if (url.indexOf('15b202') > -1) {
  //判断微信内置浏览器,QQ内置浏览器
  alert('QQ和微信内置浏览器,做你想做的操作');
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

上面判断了微信和 QQ 的内置浏览器,如果有更多不同的需求的话,可以按照上面的方式,先获取userAgent的字符串,然后再根据观察,使用indexOf判断是否含有指定的字符,来对不同浏览器进行不同的操作。

以上2018.5.5

Last Updated: 9/18/2018, 12:53:51 AM