使用原生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，结合一下

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