想要获取浏览器的类型很简单，网上提供了很多方法，但是看过之后，都是根据浏览器内核来判断是ie，谷歌，火狐，opeara的，
所以不能进一步判断在国内使用的主流浏览器类型，比如360，百度，搜狐浏览器等等。
接下来就写一下在vue中如何获取各种浏览器的类型
1.结构
<template>
<div class="positionInfo">
<p>用户所用系统：{{sysType}}</p>
<p>浏览器类型详情信息：{{browserType}}</p>
</div>
</template>
2.方法script
<script>
export default {
name: "twoV",
created() {
this.initPositionMsg();
this.initBrowserType();
},
data() {
return {
browserType: "",
sysType:""
};
},
methods: {
initBrowserType() {
var that = this;
var packageName = "whyun";
if (!window[packageName]) {
window[packageName] = {};
}
var MAX_360_CHROME_VERSION = ; //以360极速浏览器的最大内核版本为准
function getIOSVersion(ua) {
if (/cpu (?:iphone )?os (\d+_\d+)/.test(ua)) {
return parseFloat(RegExp.$.replace("_", "."));
} else {
return ;
}
}
function _mime(where, value, name, nameReg) {
var mimeTypes = window.navigator.mimeTypes,
i; for (i in mimeTypes) {
if (mimeTypes[i][where] == value) {
if (name !== undefined && nameReg.test(mimeTypes[i][name])) return !;
else if (name === undefined) return !;
}
}
return !;
}
var browser360 = {
result: "Chrome",
details: {
Chrome: ,
Chromium: ,
_360SE: ,
_360EE:
},
sorted: ["Chrome", "360SE", "360EE", "Chromium"],
check: function() {
var init = {
Chrome: ,
Chromium: ,
_360SE: ,
_360EE:
}; var plugins = window.navigator.plugins; var webstore = window.chrome.webstore;
var webstoreLen = Object.keys(webstore).length;
var pluginsLen = plugins.length; if (
(window.clientInformation.languages || (init._360SE += ),
/zh/i.test(navigator.language) && ((init._360SE += ), (init._360EE += )),
window.clientInformation.languages)
) {
var lanLen = window.clientInformation.languages.length;
if (lanLen >= ) {
(init.Chrome += ), (init.Chromium += );
} else if ( == lanLen) {
(init.Chrome += ), (init.Chromium += ), (init._360EE += );
} else if ( == lanLen) {
(init.Chrome += ), (init.Chromium += );
}
}
var pluginFrom,
maybe360 = ;
for (var r in plugins) {
if ((pluginFrom = /^(.+) PDF Viewer$/.exec(plugins[r].name))) {
if ("Chrome" == pluginFrom[]) {
(init.Chrome += ), (init._360SE += ), (maybe360 = );
} else if ("Chromium" == pluginFrom[]) {
(init.Chromium += ), (init._360EE += ), (maybe360 = );
}
} else if ("np-mswmp.dll" == plugins[r].filename) {
(init._360SE += ), (init._360EE += );
}
} maybe360 || (init.Chromium += );
if (webstoreLen <= ) {
init._360SE += ;
} else {
init._360SE += ;
init.Chromium += ;
if (pluginsLen >= ) {
(init._360EE += ), (init._360SE += ), (init.Chrome += );
} else if (pluginsLen < && pluginsLen > ) {
(init._360EE += ), (init._360SE += ), (init.Chrome += );
} else {
init.Chromium += ;
}
} var m = new Object();
(m.Chrome = init.Chrome),
(m.Chromium = init.Chromium),
(m["360SE"] = init._360SE),
(m["360EE"] = init._360EE);
var s = [];
for (var u in m) {
s.push([u, m[u]]);
}
s.sort(function(e, i) {
return i[] - e[];
});
this.sorted = s;
this.details = init;
this.result = s[][] || ""; return this.result.toLowerCase();
}
};
/**
* 获取 Chromium 内核浏览器类型
* @link http://www.adtchrome.com/js/help.js
* @link https://ext.chrome.360.cn/webstore
* @link https://ext.se.360.cn
* @return {String}
* 360ee 360极速浏览器
* 360se 360安全浏览器
* sougou 搜狗浏览器
* liebao 猎豹浏览器
* chrome 谷歌浏览器
* '' 无法判断
*/ function _getChromiumType(version) {
if (window.scrollMaxX !== undefined) return ""; var doc = document;
var _track = "track" in doc.createElement("track"),
appVersion = window.navigator.appVersion,
external = window.external; // 搜狗浏览器
if (external && "SEVersion" in external) return "搜狗浏览器"; // 猎豹浏览器
if (external && "LiebaoGetVersion" in external) return "猎豹浏览器"; if (/QQBrowser/.test(appVersion)) {
//qq浏览器
return "qq浏览器";
}
if (/Maxthon/.test(appVersion)) {
//遨游浏览器
return "遨游浏览器";
}
if (/TaoBrowser/.test(appVersion)) {
//淘宝浏览器
return "淘宝浏览器";
}
if (/BIDUBrowser/.test(appVersion)) {
//百度浏览器
return "baidu";
}
if (/UBrowser/.test(appVersion)) {
//UC浏览器
return "UC浏览器";
} if (window.navigator.vendor && window.navigator.vendor.indexOf("Opera") == ) {
//opera
return "欧朋浏览器";
}
// chrome
// if (window.clientInformation && window.clientInformation.languages && window.clientInformation.languages.length > 2) {
// return 'chrome';
// }
var p = navigator.platform.toLowerCase();
if (p.indexOf("mac") == || p.indexOf("linux") == ) {
return "谷歌浏览器";
}
if (parseInt(version) > MAX_360_CHROME_VERSION) {
return "谷歌浏览器";
}
// var webstoreKeysLength = window.chrome && window.chrome.webstore ? Object.keys(window.chrome.webstore).length : 0;
// if (_track) {
// // 360极速浏览器
// // 360安全浏览器
// return webstoreKeysLength > 1 ? '360ee' : '360se';
// } return browser360.check();
}
var client = (function() {
var browser = {}; var ua = navigator.userAgent.toLowerCase();
var s;
if ((s = ua.match(/rv:([\d.]+)\) like gecko/))) {
browser.name = "ie";
browser["ie"] = s[];
} else if ((s = ua.match(/msie ([\d.]+)/))) {
browser.name = "ie";
browser["ie"] = s[];
} else if ((s = ua.match(/edge\/([\d.]+)/))) {
browser.name = "edge";
browser["edge"] = s[];
} else if ((s = ua.match(/firefox\/([\d.]+)/))) {
browser.name = "firefox";
browser["firefox"] = s[];
} else if ((s = ua.match(/chrome\/([\d.]+)/))) {
browser.name = "chrome";
browser["chrome"] = s[];
var type = _getChromiumType(browser["chrome"]);
if (type) {
browser["chrome"] += "(" + type + ")";
}
} else if ((s = ua.match(/opera.([\d.]+)/))) {
browser.name = "opera";
browser["opera"] = s[];
} else if ((s = ua.match(/version\/([\d.]+).*safari/))) {
browser.name = "safari";
browser["safari"] = s[];
} else {
browser.name = "unknown";
browser["unknow"] = ;
} var system = {}; //detect platform
// var p = navigator.platform.toLowerCase();
if (ua.indexOf("iphone") > -) {
system.name = "iphone";
system.iphone = getIOSVersion(ua);
} else if (ua.indexOf("ipod") > -) {
system.name = "ipod";
system.ipod = getIOSVersion(ua);
} else if (ua.indexOf("ipad") > -) {
system.name = "ipad";
system.ipad = getIOSVersion(ua);
} else if (ua.indexOf("nokia") > -) {
system.name = "nokia";
system.nokia = true;
} else if (/android (\d+\.\d+)/.test(ua)) {
system.name = "android";
system.android = parseFloat(RegExp.$);
} else if (ua.indexOf("win") > -) {
system.name = "win"; if (/win(?:dows )?([^do]{})\s?(\d+\.\d+)?/.test(ua)) {
if (RegExp["$1"] == "nt") {
switch (RegExp["$2"]) {
case "5.0":
system.win = "";
break;
case "5.1":
system.win = "XP";
break;
case "6.0":
system.win = "Vista";
break;
case "6.1":
system.win = "";
break;
case "6.2":
system.win = "";
break;
case "6.3":
system.win = "8.1";
break;
case "10.0":
system.win = "";
break;
default:
system.win = "NT";
break;
}
} else if (RegExp["$1"] == "9x") {
system.win = "ME";
} else {
system.win = RegExp["$1"];
}
}
} else if (ua.indexOf("mac") > -) {
system.name = "mac";
} else if (ua.indexOf("linux") > -) {
system.name = "linux";
}
var str =
system.name +
(system[system.name] || "") +
"|" +
browser.name +
browser[browser.name];
var isMobile =
system.android ||
system.iphone ||
system.ios ||
system.ipad ||
system.ipod ||
system.nokia;
console.log(str,"")
that.sysType = system.name + system.win
that.browserType = str.split("|")[]
return {
browser: browser,
system: system,
isMobile: isMobile,
string: str
};
})();
window[packageName]["browser"] = client;
}
}
};
</script>
这样就获取到浏览器类型以及用户所用电脑系统信息了，我们在实际开发中，往往还要获取用户的地理位置信息，结合上一篇博客，使用微信提供的地理位置api，结合一下
就能实现获取用户的各种信息了