使用JS(TS)判断页面在 微信 / 微博 / QQ / 支付宝 各APP平台内置浏览器
主要代码如下
type NavigatorMap = '微信' | '支付宝' | '钉钉' | '专有钉钉' | '企业微信' | '微信小程序'
export default (nav: NavigatorMap): boolean => {
const u = navigator.userAgent.toLowerCase()
const navigatorMap = {
微信: new RegExp(/micromessenger/, 'i').test(u), //微信
企业微信: new RegExp(/micromessenger/, 'i').test(u) && new RegExp(/wxwork/, 'i').test(u),//企业微信
支付宝: new RegExp(/alipay/, 'i').test(u),// 支付宝
专有钉钉: new RegExp(/taurusapp/, 'i').test(u),//专有钉钉
钉钉: new RegExp(/dingtalk/, 'i').test(u), // 钉钉
微信小程序: (window as any)?.__wxjs_environment == "miniprogram"
}
return navigatorMap[nav]
}
使用
navigatorUserAgent('微信')
// 如果在微信浏览器中直接返回 true,其他平台返回false
技术点说明
navigator.userAgent.toLowerCase()
UserAgent 只读属性返回当前浏览器的用户代理字符串。
先看在谷歌浏览器控制台打印的结构:
‘mozilla/5.0 (iphone; cpu iphone os 13_2_3 like mac os x) applewebkit/605.1.15 (khtml, like gecko) version/13.0.3 mobile/15e148 safari/604.1’
主要判断移动端APP的内置浏览器,以移动端钉钉浏览器环境为例
mozilla/5.0 (linux; u; android 11; zh-cn; v1936a build/rp1a.200720.012) applewebkit/537.36 (khtml, like gecko) version/4.0 chrome/69.0.3497.100 uws/3.22.1.210 mobile safari/537.36 aliapp(dingtalk/6.5.20) com.alibaba.android.rimet/24646881 channel/10003993 language/zh-cn abi/64 ut4aplus/0.2.25 colorscheme/light
❗❗❗注意: 该规范要求浏览器通过该字段提供尽可能少的信息。不要假设此属性的值在同一浏览器的未来版本中保持不变。尽量完全不要使用它,或者只在浏览器的当前版本和过去版本中使用它。新的浏览器可能开始使用相同的 UA,或部分,作为一个旧的浏览器,你真的不能保证浏览器代理确实是这个属性的广告。还要记住,浏览器用户可以根据需要更改此字段的值(UA 欺骗)。文章来源:https://www.toymoban.com/news/detail-524499.html
Navigator.userAgent文章来源地址https://www.toymoban.com/news/detail-524499.html
到了这里,关于使用JS(TS)判断页面在 微信 / 微博 / QQ / 支付宝 各APP平台内置浏览器的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!