前端开发：如何判断用户浏览器navigator.userAgent示例

判断用户浏览器

navigator.userAgent

判断用户所使用的浏览器主要用到的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

示例

使用方式，直接使用这个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和微信内置浏览器，做你想做的操作");
}

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