使用原生js 获取用户访问项目的浏览器类型
想要获取浏览器的类型很简单,网上提供了很多方法,但是看过之后,都是根据浏览器内核来判断是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,结合一下
就能实现获取用户的各种信息了
使用原生js 获取用户访问项目的浏览器类型的更多相关文章
- 小程序原生js获取用户权限
1.首先要有一个按钮 <view name="authorizemodal"> <view class="drawer_screen" wx: ...
- 原生JS获取各种高度宽度、浏览器窗口滚动条的位置、元素的几何尺寸名
1)关于 pageX, clienX,offsetX,layerX pageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化 clientX:鼠标在页面上可视区域的位 ...
- JS获取用户的Ip地址
在网站中通常需要获取使用者的ip地址,获取抵制的方式有很多,这里就简单介绍一下js获取用户ip地址 /*使用的新浪的ip查询api,根据返回的数据进行判断*/ <script src=" ...
- 关于Echarts的原生js获取DOM元素与动态加载DOM元素的冲突问题
1.前言: 最近在做的看板项目,因为需要循环加载后台数据,并且用Echarts做数据呈现,所以jQuery和angular等库统统靠边站,Echarts用的是原生js获取DOM元素,至于诸多不兼容等深 ...
- 原生js获取元素的样式信息
工作中经常会需要获取DOM元素的样式,之前都是通过jquery的css()方法,现在总结一下通过原生js获取元素样式的方法. obj.style js var _width = obj.style.w ...
- 原生js获取鼠标坐标方法全面讲解-zmq
原生js获取鼠标坐标方法全面讲解:clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y 一.关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种:eve ...
- 兼容各版本浏览器,封装原生Js获取ClassName
web前端开发工作中常常会用到获取元素的className,用jQuery的$(".class")方法也可以获取className,但是有时候牵扯到数据而影响的加载顺序的原因会获取 ...
- 原生JS获取DOM 节点到浏览器顶部的距离或者左侧的距离
关于js获取dom 节点到浏览器顶/左部的距离,Jquery里面有封装好的offset().top/offset().left,只到父级的顶/左部距离position().top/position() ...
- Nginx反向代理+Tomcat+Springmvc获取用户访问ip
Nginx+Tomcat+Springmvc获取用户访问ip 1.Nginx反向代理 修改Nginx配置文件 location / { ***********之前代码*******; proxy_se ...
随机推荐
- 用 Webpack 解决应用性能问题
1. 影响页面加载时长的 Top3 因素 页面初载时,加载大量 JavaScript 脚本: 页面初载时,加载大量 CSS 文件: 页面初载时,加载大量网络资源: 页面加载的越久,页面不可交互的时间就 ...
- java常用类与包装类--包装类
2.基本数据类型数据的包装类 局部变量中基本数据类型直接分配在栈中,而对象分配在堆中 将基本数据类型封装成对象的好处在于可以在对象中定义更多的功能方法来操作该数据 包装类主要功能:用于基本数据类型与字 ...
- python接口自动化七(重定向-禁止重定向Location)
前言 某屌丝男A鼓起勇气向女神B打电话表白,女神B是个心机婊觉得屌丝男A是好人,不想直接拒绝于是设置呼叫转移给闺蜜C了,最终屌丝男A和女神闺蜜C表白成功了,这种场景其实就是重定向了. 一.重定向 1. ...
- 【NOIP2014模拟10.25A组】画矩形
题目 分析 由于要求按时间顺序来操作,考虑整体二分: 对于一段二分出来的区间,将左区间的修改和右区间的查询取出来,每次更新每个查询的答案,正确性显然. 现在有一对修改和查询的操作(保证所有的查询都在修 ...
- TF-epoch、 iteration和batchsize区别(转载)
from http://www.cnblogs.com/qggg/p/6876942.html 转自 http://blog.csdn.net/sinat_30071459/article/detai ...
- 【leetcode】1210. Minimum Moves to Reach Target with Rotations
题目如下: In an n*n grid, there is a snake that spans 2 cells and starts moving from the top left corner ...
- @ENABLECACHING 基于注解的缓存
@EnableCaching• @Cacheable指定一个或多个Cache名字,同属性cacheNamesSpring Cache 使用 ---@EnableCaching @Cacheable 注 ...
- Kotlin使用率达35%,Java要退位了?
在今年的Google I/O大会上,关于Kotlin,Google只说了只言片语: 在过去一年里,有35%的专业Android开发者在使用Kotlin,其中95%的开发者都对Kotlin非常满意. 之 ...
- CodeForces 1100F Ivan and Burgers
CodeForces题面 Time limit 3000 ms Memory limit 262144 kB Source Codeforces Round #532 (Div. 2) Tags da ...
- 网页结构树DOM
引入 window对象 所有浏览器都支持 window 对象.它表示浏览器窗口. *如果文档包含框架(frame 或 iframe 标签),浏览器会为 HTML 文档创建一个 window 对象,并为 ...