Want to get the type of browser is very simple, the Internet provides a lot of ways, but after reading all be judged according to browser kernel is ie, Google, Firefox, opeara of,
Therefore, no further major browsers determine the type for domestic use, such as 360, Baidu, Sohu browser and so on.
Then I write about how to obtain a variety of browsers in the type vue
1. Structure
<Template>
<div class = " positionInfo " >
<P> used by the user system: {{systype}} </ P>
<P> browser type in Detail: {{BrowserType}} </ P>
</ div>
< / template>
2. The method 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 [the packageName]) { window [the packageName] = {}; } var MAX_360_CHROME_VERSION = 69 ; // at the maximum speed browser 360 kernel version prevail function getIOSVersion (UA) { IF (/ CPU (: iPhone?) OS? (\ + D _ \ + D) / .test (UA)) { return parseFloat (the RegExp $. . 1 .replace ( " _ " , " . " )); } the else { return 2 ; } } 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 !0; else if (name === undefined) return !0; } } return !1; } var browser360 = { result: "Chrome", details: { Chrome: 5, Chromium: 0, _360SE: 0, _360EE: 0 }, sorted: ["Chrome", "360SE", "360EE", "Chromium"], check: function() { var init = { Chrome: 5, Chromium: 0, _360SE: 0, _360EE: 0 }; 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 += 8), /zh/i.test(navigator.language) && ((init._360SE += 3), (init._360EE += 3)), window.clientInformation.languages) ) { var lanLen = window.clientInformation.languages.length; if (lanLen >= 3) { (init.Chrome += 10), (init.Chromium += 6); } else if (2 == lanLen) { (init.Chrome += 3), (init.Chromium += 6), (init._360EE += 6); } else if (1 == lanLen) { (init.Chrome += 4), (init.Chromium += 4); } } var pluginFrom, maybe360 = 0; for (var r in plugins) { if ((pluginFrom = /^(.+) PDF Viewer$/.exec(plugins[r].name))) { if ("Chrome" == pluginFrom[1]) { (init.Chrome += 6), (init._360SE += 6), (maybe360 = 1); } else if ("Chromium" == pluginFrom[1]) { (init.Chromium += 10), (init._360EE += 6), (maybe360 = 1); } } else if ("np-mswmp.dll" == plugins[r].filename) { (init._360SE += 20), (init._360EE += 20); } } maybe360 || (init.Chromium += 9); if (webstoreLen <= 1) { init._360SE += 7; } else { init._360SE += 4; init.Chromium += 3; if (pluginsLen >= 30) { (init._360EE += 7), (init._360SE += 7), (init.Chrome += 7); } else if (pluginsLen < 30 && pluginsLen > 10) { (init._360EE += 3), (init._360SE += 3), (init.Chrome += 3); } else { init.Chromium += 6; } } 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[1] - e[1]; }); this.sorted = s; this.details = init; this.result = s[0][0] || ""; 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 speed browser * 360se 360 security browser * sougou Sogou browser * liebao cheetah browser * chrome browser Google * '' can not judge * / function _getChromiumType (Version) { IF (window.scrollMaxX! == undefined ) return "" ; var DOC = Document; var _track = "Track " in doc.createElement ( " Track " ), appVersion = window.navigator.appVersion, External = the window.external; // Sogou browser IF (External && " SEVersion " in External) return " Sogou browser " ; // cheetah browser IF (External && " LiebaoGetVersion " in External) return " cheetah browser " ; IF(/ QQBrowser / .test (appVersion)) { // QQ browser return " QQ Browser " ; } IF (/ Maxthon / .test (appVersion)) { // travel browser return " travel Browser " ; } IF (/ TaoBrowser / .test (appVersion)) { // Taobao browser return " Taobao browser " ; } IF (/ BIDUBrowser / .test (appVersion)) { // Baidu browser to return " Baidu " ; } IF (/ UBrowser / .test (appVersion)) { // the UC browser to return " the UC Browser " ; } IF (window.navigator.vendor window.navigator.vendor.indexOf && ( " Opera " ) == 0 ) { // Opera return " European friends browser " ; } // Chrome // if (window.clientInformation && window.clientInformation.languages && window.clientInformation.languages.length > 2) { // return 'chrome'; // } var p = navigator.platform.toLowerCase(); if (p.indexOf("mac") == 0 || p.indexOf("linux") == 0) { return "谷歌浏览器"; } if (parseInt(version) > MAX_360_CHROME_VERSION) { return "Google browser " ; } // var webstoreKeysLength = window.chrome && window.chrome.webstore Object.keys (window.chrome.webstore) .length: 0;? // IF (_track) { // // 360 speed browser is // // 360 secure browser // 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[1]; } else if ((s = ua.match(/msie ([\d.]+)/))) { browser.name = "ie"; browser["ie"] = s[1]; } else if ((s = ua.match(/edge\/([\d.]+)/))) { browser.name = "edge"; browser["edge"] = s[1]; } else if ((s = ua.match(/firefox\/([\d.]+)/))) { browser.name = "firefox"; browser["firefox"] = s[1]; } else if ((s = ua.match(/chrome\/([\d.]+)/))) { browser.name = "chrome"; browser["chrome"] = s[1]; var type = _getChromiumType(browser["chrome"]); if (type) { browser["chrome"] += "(" + type + ")"; } } else if ((s = ua.match(/opera.([\d.]+)/))) { browser.name = "opera"; browser["opera"] = s[1]; } else if ((s = ua.match(/version\/([\d.]+).*safari/))) { browser.name = "safari"; browser["safari"] = s[1]; } else { browser.name = "unknown"; browser["unknow"] = 0; } var system = {}; //detect platform // var p = navigator.platform.toLowerCase(); if (ua.indexOf("iphone") > -1) { system.name = "iphone"; system.iphone = getIOSVersion(ua); } else if (ua.indexOf("ipod") > -1) { system.name = "ipod"; system.ipod = getIOSVersion(ua); } else if (ua.indexOf("ipad") > -1) { system.name = "ipad"; system.ipad = getIOSVersion(ua); } else if (ua.indexOf("nokia") > -1) { system.name = "nokia"; system.nokia = true; } else if (/android (\d+\.\d+)/.test(ua)) { system.name = "android"; system.android = parseFloat(RegExp.$1); } else if (ua.indexOf("win") > -1) { system.name = "win"; if (/win(?:dows )?([^do]{2})\s?(\d+\.\d+)?/.test(ua)) { if (RegExp["$1"] == "nt") { switch (RegExp["$2"]) { case "5.0": system.win = "2000"; break; case "5.1": system.win = "XP"; break; case "6.0": system.win = "Vista"; break; case "6.1": system.win = "7"; break; case "6.2": system.win = "8"; break; case "6.3": system.win = "8.1"; break; case "10.0": system.win = "10"; break; default: system.win = "NT"; break; } } else if (RegExp["$1"] == "9x") { system.win = "ME"; } else { system.win = RegExp["$1"]; } } } else if (ua.indexOf("mac") > -1) { system.name = "mac"; } else if (ua.indexOf("linux") > -1) { 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,"33333333") that.sysType = system.name + system.win that.browserType = str.split("|")[1] return { browser: browser, system: system, isMobile: isMobile, string: str }; })(); window[packageName]["browser"] = client; } } }; </script>
This will get the browser type and user computer system information, and we in the actual development, often have to obtain location information of the user, combined on a blog, use micro-channel to provide location api, combined with what
You will be able to achieve a variety of user access to information