admin管理员组文章数量:1613942
需求描述: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/archives/354/
然后,我们把这个标签信息,添加到我们上面写的判断中去。微信浏览器不就是加了MicroMessenger
这个标志么。原理一样。
版权声明:本文标题:奇葩需求之:js判断浏览器环境,是webview?安卓App?苹果浏览器?还是微信浏览器打开的。 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dianzi/1728661132a1168640.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论