js判断浏览器环境、内核、载体、外壳、操作系统等

其他 2020-10-14 23:19:04 阅读次数: 0

我们部署在Web服务器上的前端应用，既可以用PC浏览器访问，也可以用手机浏览器访问。项目中很多时候会遇到判断浏览器环境的问题，比如说微信浏览器/APP环境，ios/安卓环境；浏览器是JavaScript的承载体，我们可以从浏览器上获取相关的信息，来进一步处理我们的业务逻辑。

1.使用场景

  • 判断用户浏览器是桌面端还是移动端，显示对应的主题样式
  • 判断用户浏览器是Android端还是iOS端，跳转到对应的App下载链接
  • 判断用户浏览器是微信端还是H5端，调用微信分享或当前浏览器分享
  • 获取用户浏览器的内核和载体，用于统计用户设备平台分布区间
  • 获取用户浏览器的载体版本，用于提示更新信息
  • 其实还有很多使用场景，就不一一举例了

2.原理

针对处理一个这样的使用场景，其实有一个比较专业的名字，叫做浏览器指纹。我们上面谈到的需求也只是浏览器指纹方案里面的一小部分，而我们需要使用到的浏览器指纹就是 UserAgent。

中文翻译过来就是用户代理。引用百度的定义：一个特殊字符串头，使得服务器能够识别客户使用的操作系统及版本、CPU类型、浏览器载体及版本、浏览器渲染引擎、浏览器语言、浏览器插件等。而这些信息也足够我们去判断浏览器运行环境了。

3.浏览器信息：权重按照以下降序排列

  • 浏览器系统：所运行的操作系统，包含 Windows、OSX、Linux、Android、iOS
  • 浏览器平台：所运行的设备平台，包含 Desktop桌面端、Mobile移动端
  • 浏览器内核：浏览器渲染引擎，包含 Webkit、Gecko、Presto、Trident
  • 浏览器载体：五大浏览器品牌，包含 Chrome、Safari、Firefox、Opera、Iexplore/Edge
  • 浏览器外壳：基于五大浏览器品牌的内核进行开发，再套一层自研技术的外壳，如国内众多浏览器品牌

4. 判断方法

4.1 先提取 userAgent：
const ua = global.navigator.userAgent.toLowerCase();
  // 输出
  mozilla/5.0 (macintosh; intel mac os x 10_15_4) applewebkit/537.36 (khtml, like gecko) chrome/84.0.4147.105 safari/537.36

获取UserAgent是否包含字段：判断是否包含系统、平台、内核、载体、外壳的特有字段

const testUa = regexp => regexp.test(ua);

获取UserAgent对应字段的版本

const testVs = regexp => (ua.match(regexp) + "").replace(/[^0-9|_.]/ig, "").replace(/_/ig, ".");
4.2 方案

上述准备工作完成后，我们就按照权重(系统 + 系统版本 > 平台 > 内核 + 载体 + 内核版本 + 载体版本 > 外壳 + 外壳版本)根据系统、平台、内核、载体、外壳的特有字段来归类统一浏览器运行环境。

4.2.1 系统+系统版本
// 系统
let system = "unknown";
if (testUa(/windows|win32|win64|wow32|wow64/ig)) {
    
    
 system = "windows"; // window系统
} else if (testUa(/macintosh|macintel/ig)) {
    
    
 system = "osx"; // osx系统
} else if (testUa(/x11/ig)) {
    
    
 system = "linux"; // linux系统
} else if (testUa(/android|adr/ig)) {
    
    
 system = "android"; // android系统
} else if (testUa(/ios|iphone|ipad|ipod|iwatch/ig)) {
    
    
 system = "ios"; // ios系统
}
 
// 系统版本
let systemVs = "unknown";
if (system === "windows") {
    
    
 if (testUa(/windows nt 5.0|windows 2000/ig)) {
    
    
  systemVs = "2000";
 } else if (testUa(/windows nt 5.1|windows xp/ig)) {
    
    
  systemVs = "xp";
 } else if (testUa(/windows nt 5.2|windows 2003/ig)) {
    
    
  systemVs = "2003";
 } else if (testUa(/windows nt 6.0|windows vista/ig)) {
    
    
  systemVs = "vista";
 } else if (testUa(/windows nt 6.1|windows 7/ig)) {
    
    
  systemVs = "7";
 } else if (testUa(/windows nt 6.2|windows 8/ig)) {
    
    
  systemVs = "8";
 } else if (testUa(/windows nt 6.3|windows 8.1/ig)) {
    
    
  systemVs = "8.1";
 } else if (testUa(/windows nt 10.0|windows 10/ig)) {
    
    
  systemVs = "10";
 }
} else if (system === "osx") {
    
    
 systemVs = testVs(/os x [\d._]+/ig);
} else if (system === "android") {
    
    
 systemVs = testVs(/android [\d._]+/ig);
} else if (system === "ios") {
    
    
 systemVs = testVs(/os [\d._]+/ig);
}
4.2.2 平台
let platform = "unknow";
if (system === "windows" || system === "osx" || system === "linux") {
    
    
 platform = "desktop"; // 桌面端
} else if (system === "android" || system === "ios" || testUa(/mobile/ig)) {
    
    
 platform = "mobile"; // 移动端
}

// 实际应用：判断浏览器函数
function isMobile() {
    
    
  if (testUa(/(phone|pad|pod|iphone|ipod|ios|ipad|android|mobile|blackberry|iemobile|mqqbrowser|juc|fennec|wosbrowser|browserng|webos|symbian|windows phone)/ig)) {
    
    
    return true // 移动端
  } else {
    
    
    return false // PC端
  }
}
4.2.3 内核+载体
let engine = "unknow";
let supporter = "unknow";
if (testUa(/applewebkit/ig) && testUa(/safari/ig)) {
    
    
 engine = "webkit"; // webkit内核
 if (testUa(/edge/ig)) {
    
    
  supporter = "edge"; // edge浏览器
 } else if (testUa(/opr/ig)) {
    
    
  supporter = "opera"; // opera浏览器
 } else if (testUa(/chrome/ig)) {
    
    
  supporter = "chrome"; // chrome浏览器
 } else {
    
    
  supporter = "safari"; // safari浏览器
 }
} else if (testUa(/gecko/ig) && testUa(/firefox/ig)) {
    
    
 engine = "gecko"; // gecko内核
 supporter = "firefox"; // firefox浏览器
} else if (testUa(/presto/ig)) {
    
    
 engine = "presto"; // presto内核
 supporter = "opera"; // opera浏览器
} else if (testUa(/trident|compatible|msie/ig)) {
    
    
 engine = "trident"; // trident内核
 supporter = "iexplore"; // iexplore浏览器
}
4.2.4 内核版本+载体版本
// 内核版本
let engineVs = "unknow";
if (engine === "webkit") {
    
    
 engineVs = testVs(/applewebkit\/[\d.]+/ig);
} else if (engine === "gecko") {
    
    
 engineVs = testVs(/gecko\/[\d.]+/ig);
} else if (engine === "presto") {
    
    
 engineVs = testVs(/presto\/[\d.]+/ig);
} else if (engine === "trident") {
    
    
 engineVs = testVs(/trident\/[\d.]+/ig);
}
 
// 载体版本
let supporterVs = "unknow";
if (supporter === "chrome") {
    
    
 supporterVs = testVs(/chrome\/[\d.]+/ig);
} else if (supporter === "safari") {
    
    
 supporterVs = testVs(/version\/[\d.]+/ig);
} else if (supporter === "firefox") {
    
    
 supporterVs = testVs(/firefox\/[\d.]+/ig);
} else if (supporter === "opera") {
    
    
 supporterVs = testVs(/opr\/[\d.]+/ig);
} else if (supporter === "iexplore") {
    
    
 supporterVs = testVs(/(msie [\d.]+)|(rv:[\d.]+)/ig);
} else if (supporter === "edge") {
    
    
 supporterVs = testVs(/edge\/[\d.]+/ig);
}
4.2.5 外壳+外壳版本
let shell = "none";
let shellVs = "unknow";
if (testUa(/micromessenger/ig)) {
    
    
 shell = "wechat"; // 微信浏览器
 shellVs = testVs(/micromessenger\/[\d.]+/ig);
} else if (testUa(/qqbrowser/ig)) {
    
    
 shell = "qq"; // QQ浏览器
 shellVs = testVs(/qqbrowser\/[\d.]+/ig);
} else if (testUa(/ubrowser/ig)) {
    
    
 shell = "uc"; // UC浏览器
 shellVs = testVs(/ubrowser\/[\d.]+/ig);
} else if (testUa(/2345explorer/ig)) {
    
    
 shell = "2345"; // 2345浏览器
 shellVs = testVs(/2345explorer\/[\d.]+/ig);
} else if (testUa(/metasr/ig)) {
    
    
 shell = "sougou"; // 搜狗浏览器
} else if (testUa(/lbbrowser/ig)) {
    
    
 shell = "liebao"; // 猎豹浏览器
} else if (testUa(/maxthon/ig)) {
    
    
 shell = "maxthon"; // 遨游浏览器
 shellVs = testVs(/maxthon\/[\d.]+/ig);
} else if (testUa(/bidubrowser/ig)) {
    
    
 shell = "baidu"; // 百度浏览器
 shellVs = testVs(/bidubrowser [\d.]+/ig);
}
4.2.6 判断是否为微信客户端
const isWechart = function () {
    
    
  let rst = true
  const ua = navigator.userAgent.toLowerCase()
  if (ua.match(/(phone|pad|pod|iphone|ipod|ios|ipad|android|mobile|blackberry|iemobile|mqqbrowser|juc|fennec|wosbrowser|browserng|webos|symbian|windows phone)/i)) {
    
    
    if (!(ua.match(/MicroMessenger/i) === "micromessenger")) {
    
    
      rst = false
    }
  } else {
    
    
    rst = false
  }
  return rst
}
4.2.7 判断微信浏览器是PC端还是手机端，以及手机端是微信浏览器还是非微信浏览器
//平台、设备和操作系统  
var system = {
    
    
  win: false,
  mac: false,
  xll: false,
  ipad: false
}
//检测平台  
var p = navigator.platform
system.win = p.indexOf("Win") === 0
system.mac = p.indexOf("Mac") === 0
system.x11 = (p === "X11") || (p.indexOf("Linux") === 0)
system.ipad = (navigator.userAgent.match(/iPad/i) !== null)
//跳转语句，如果是手机访问就自动跳转到wap.baidu.com页面  
if (system.win || system.mac || system.xll || system.ipad) {
    
    
  alert("在PC端上打开的")
} else {
    
    
  var ua = navigator.userAgent.toLowerCase()
  if (ua.match(/MicroMessenger/i) === "micromessenger") {
    
    
    alert("在手机端微信上打开的")
  } else {
    
    
    alert("在手机上非微信上打开的")
  }
}
4.2.8 终极合体

根据以上的条件判断获得的变量如下，我们可以把它们合并成一个对象输出。这样就可以输出一个清晰的浏览器运行环境，后面想干嘛就干嘛了，多方便。

  • system：系统
  • systemVs：系统版本
  • platform：平台
  • engine：内核
  • engineVs：内核版本
  • supporter：载体
  • supporterVs：载体版本
  • shell：外壳
  • shellVs：外壳版本
 function BrowserType() {
    
    
   const ua = navigator.userAgent.toLowerCase();
   const testUa = regexp => regexp.test(ua);
   const testVs = regexp => (ua.match(regexp) + "").replace(/[^0-9|_.]/ig, "").replace(/_/ig, ".");
   // 接上以上if...else条件判断
   // ......
   // 获取到system、systemVs、platform、engine、engineVs、supporter、supporterVs、shell、shellVs
   return Object.assign({
    
    
    engine, // webkit gecko presto trident
    engineVs,
    platform, // desktop mobile
    supporter, // chrome safari firefox opera iexplore edge
    supporterVs,
    system, // windows osx linux android ios
    systemVs
   }, shell === "none" ? {
    
    } : {
    
    
    shell, // wechat qq uc 2345 sougou liebao maxthon baidu
    shellVs
   });
  }
5.参考文章：

js判断浏览器的环境（pc端，移动端，还是微信浏览器）
JavaScript判断浏览器运行环境的详细方法

猜你喜欢

转载自blog.csdn.net/a1056244734/article/details/107851039
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022