当前位置: 首页 - 编程技术 - 文章正文

奇葩需求之:js判断浏览器环境,是webview?安卓App?苹果浏览器?还是微信浏览器打开的。

xiaoqihv

需求描述:js脚本判断网页是在什么环境中打开的。内置浏览器,还是app内嵌入式的webview打开的,亦或是在微信浏览器内打开的,还是用pc端打开的。

查了一圈资料,原理基本上就是通过navigator对象上的信息来做文章,更具体一点是,navigator.userAgent这个对象上的信息。

借鉴(chāo xí)zepto.js的浏览器嗅探代码,改写为下面这样的。

// 浏览器嗅探export function detect(navigator) { let ua = navigator.userAgent; let platform = navigator.platform; let os = {}, browser = {}, webkit = ua.match(/Web[kK]it[\/]{0,1}([\d.]+)/), android = ua.match(/(Android);?[\s\/]+([\d.]+)?/), osx = !!ua.match(/\(Macintosh\; Intel /), ipad = ua.match(/(iPad).*OS\s([\d_]+)/), ipod = ua.match(/(iPod)(.*OS\s([\d_]+))?/), iphone = !ipad && ua.match(/(iPhone\sOS)\s([\d_]+)/), webos = ua.match(/(webOS|hpwOS)[\s\/]([\d.]+)/), win = /Win\d{2}|Windows/.test(platform), wp = ua.match(/Windows Phone ([\d.]+)/), touchpad = webos && ua.match(/TouchPad/), kindle = ua.match(/Kindle\/([\d.]+)/), silk = ua.match(/Silk\/([\d._]+)/), blackberry = ua.match(/(BlackBerry).*Version\/([\d.]+)/), bb10 = ua.match(/(BB10).*Version\/([\d.]+)/), rimtabletos = ua.match(/(RIM\sTablet\sOS)\s([\d.]+)/), playbook = ua.match(/PlayBook/), chrome = ua.match(/Chrome\/([\d.]+)/) || ua.match(/CriOS\/([\d.]+)/), firefox = ua.match(/Firefox\/([\d.]+)/), firefoxos = ua.match(/\((?:Mobile|Tablet); rv:([\d.]+)\).*Firefox\/[\d.]+/), ie = ua.match(/MSIE\s([\d.]+)/) || ua.match(/Trident\/[\d](?=[^\?]+).*rv:([0-9.].)/), webview = !chrome && ua.match(/(iPhone|iPod|iPad).*AppleWebKit(?!.*Safari)/), safari = webview || ua.match(/Version\/([\d.]+)([^S](Safari)|[^M]*(Mobile)[^S]*(Safari))/), weixin = ua.match(/MicroMessenger/i); // if (browser.webkit = !!webkit) browser.version = webkit[1] if (webkit) { browser.webkit = !!webkit; browser.version = webkit[1]; } if (android) (os.android = true), (os.version = android[2]); if (iphone && !ipod) (os.ios = os.iphone = true), (os.version = iphone[2].replace(/_/g, ".")); if (ipad) (os.ios = os.ipad = true), (os.version = ipad[2].replace(/_/g, ".")); if (ipod) (os.ios = os.ipod = true), (os.version = ipod[3] ? ipod[3].replace(/_/g, ".") : null); if (wp) (os.wp = true), (os.version = wp[1]); if (webos) (os.webos = true), (os.version = webos[2]); if (touchpad) os.touchpad = true; if (blackberry) (os.blackberry = true), (os.version = blackberry[2]); if (bb10) (os.bb10 = true), (os.version = bb10[2]); if (rimtabletos) (os.rimtabletos = true), (os.version = rimtabletos[2]); if (playbook) browser.playbook = true; if (kindle) (os.kindle = true), (os.version = kindle[1]); if (silk) (browser.silk = true), (browser.version = silk[1]); if (!silk && os.android && ua.match(/Kindle Fire/)) browser.silk = true; if (chrome) (browser.chrome = true), (browser.version = chrome[1]); if (firefox) (browser.firefox = true), (browser.version = firefox[1]); if (firefoxos) (os.firefoxos = true), (os.version = firefoxos[1]); if (ie) (browser.ie = true), (browser.version = ie[1]); if (safari && (osx || os.ios || win)) { browser.safari = true; if (!os.ios) browser.version = safari[1]; } if (webview) browser.webview = true; if (weixin) browser.wx = true; // 微信浏览器 os.tablet = !!( ipad || playbook || (android && !ua.match(/Mobile/)) || (firefox && ua.match(/Tablet/)) || (ie && !ua.match(/Phone/) && ua.match(/Touch/)) ); os.phone = !!( !os.tablet && !os.ipod && (android || iphone || webos || blackberry || bb10 || (chrome && ua.match(/Android/)) || (chrome && ua.match(/CriOS\/([\d.]+)/)) || (firefox && ua.match(/Mobile/)) || (ie && ua.match(/Touch/))) ); return { os, browser };}

使用的时候,

// 把detect 函数引入需要使用的地方import { detect } from "@/utils/index";//.....省略 let res = detect(navigator); console.log(res); // {os: {iphone: true, ios: true, version: "11.0", tablet: false, phone: true}, browser: {webkit: true, version: "604.1.38", safari: true}} },

具体使用方式,大家可以自定义了。

我在测试中,遇到的问题,是,在自己开发的App中,使用的是webview加载页面,无法判断是不是webview,打印出来navigator.userAgent和在小米手机自带的浏览器中的,是一模一样的,根本就无法判断是不是在app中通过webview打开的。

这个也不难理解,他们的浏览器,也是套了一个webview的壳而已。

那如何解决,是不是用app内打开的呢?

让安卓开发人员,在开发的时候,添加一些标志信息到userAgent中去吧。

// 修改ua使得web端正确判断String ua = webview.getSettings().getUserAgentString();webview.getSettings().setUserAgentString(ua+"; MYAPP/"+appversion);

具体链接可以参考:http://www.jincon.com/archives/354/

然后,我们把这个标签信息,添加到我们上面写的判断中去。微信浏览器不就是加了MicroMessenger这个标志么。原理一样。

文章地址:https://wenmayi.cn/post/749.html