js window对象之h5判断所处浏览器/APP环境

阅读本篇文章大约需要3分钟。

今天来说一说window对象的navigator属性，话不多说上代码：

// *以下均为博主当前使用的谷歌浏览器输出情况
navigator.appCodeName // 浏览器的代码名，如：Mozilla。
navigator.appName // 浏览器名称，如：Netscape，一般用以区分不同的浏览器。
navigator.appVersion // 浏览器版本，如：5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.141 Safari/537.36，一般用以区分浏览器的版本，比如IE8、IE11等。
navigator.language // 浏览器当前语言，如：zh-CN，项目中做国际化时可以用此获取浏览器当前初始的语言。
navigator.platform // 浏览器的操作系统平台，如谷歌浏览器：Win32。
navigator.userAgent // 浏览器用于HTTP 请求的用户代理。

那我们怎么区分h5所在的浏览器/APP呢？就是利用navigator的userAgent，话不多说再上代码：

// 微信中的userAgent：Mozilla/5.0 (iPhone; CPU iPhone OS 14_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148 MicroMessenger/8.0.1(0x18000125) NetType/WIFI Language/zh_CN
// QQ中：Mozilla/5.0 (iPhone; CPU iPhone OS 14_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148 QQ/8.5.5.648 V1_IPH_SQ_8.5.5_1_APP_A Pixel/1170 SimpleUISwitch/0 QQTheme/1000 Core/WKWebView Device/Apple(iPhone 12) NetType/WIFI QBWebViewType/1 WKType/1
// 支付宝中：Mozilla/5.0 (iPhone; CPU iPhone OS 14_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/18C66 ChannelId(8) Ariver/1.1.0 AliApp(AP/10.2.13.9000) Nebula WK RVKType(1) AlipayDefined(nt:WIFI,ws:390|780|3.0) AlipayClient/10.2.13.9000 Language/zh-Hans Region/CN NebulaX/1.0.0
// safari浏览器中：Mozilla/5.0 (iPhone; CPU iPhone OS 14_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0.2 Mobile/15E148 Safari/604.1
// （ios的谷歌表现有些许不同）谷歌浏览器中：Mozilla/5.0 (iPhone; CPU iPhone OS 14_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/87.0.4280.77 Mobile/15E148 Safari/604.1

const userAgent = navigator.userAgent.toLocaleLowerCase()
if (userAgent.includes('micromessenger')) {
  if (userAgent.includes('miniprogram')) {
    console.log('isWeixinMP') // 微信小程序
  } else {
    console.log('isWeixin') // 微信
  }
} else if (userAgent.includes('qq')) {
  console.log('isQQ') // QQ
} else if (userAgent.includes('aliapp')) {
  console.log('isAlipay') // 支付宝
} else if (userAgent.includes('crios') || userAgent.includes('chrome')) {
  console.log('isChrome') // 谷歌
} else if (userAgent.includes('safari')) {
  // 或者别的普通浏览器环境 // Safari
  console.log('isSafari')
} else {
  // 一个自定义的默认值
  console.log('isMobile')
}

从上面的打印来看，可以发现一些判断条件的规律，大概是在Mobile/****之后，以上是一部分APP环境，根据项目需要，可以打印userAgent来判断更多的环境，比如微博、淘宝、京东中打开以此来实现不同环境中的不同处理，例如，在淘宝中发放淘宝优惠券，京东中发放京东优惠券等等。注意一下谷歌浏览器在ios表现有些不同。

如果本文对你有些许帮助，动动手指点个赞吧，你的鼓励是我创作的动力，笔芯。