使用原生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 = 69; //以360极速浏览器的最大内核版本为准
            function getIOSVersion(ua) {
                if (/cpu (?:iphone )?os (d+_d+)/.test(ua)) {
                    return parseFloat(RegExp.$1.replace("_", "."));
                } 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极速浏览器
             *         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") == 0) {
                    //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") == 0 || p.indexOf("linux") == 0) {
                    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[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>

　　这样就获取到浏览器类型以及用户所用电脑系统信息了，我们在实际开发中，往往还要获取用户的地理位置信息，结合上一篇博客，使用微信提供的地理位置api，结合一下

就能实现获取用户的各种信息了