判断各种浏览器

随着时代的发展，技术的进步，目前火狐、谷歌等浏览器为主流浏览器，IE逐渐淡出人们的视野。但，前端人员依旧不可忽略浏览器的兼容问题。有时，我们还需要进行浏览器的判断，况且，如今微信的普遍使用，加上微信与QQ的方方面面都不大相同，android移动设备与IOS移动设备更是天差地别，故而，浏览器的判断以及移东设备等的判断也随之出现。
在刚刚结束的项目中，小编便遇到了需要进行浏览器以及判断是在微信浏览器中打开或是在qq中打开的操作。在找到解决问题的方法之后，小编认为，共同成长，知识共享是十分重要的，因此，在此和大家分享判断方式。
（1）第一种方式：一般的使用方式

<script>
    $(function(){
        var browser = {
            versions: function() {
                var u = navigator.userAgent,app = navigator.appVersion;
                return { //移动终端浏览器版本信息
                    trident: u.indexOf('Trident') > -1, //IE内核
                    presto: u.indexOf('Presto') > -1, //opera内核
                    webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
                    gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
                    mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
                    ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
                    android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或uc浏览器
                    iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器
                    iPad: u.indexOf('iPad') > -1, //是否iPad
                    webApp: u.indexOf('Safari') == -1 //是否web应该程序，没有头部与底部
                };
            }(),
            language: (navigator.browserLanguage || navigator.language).toLowerCase()
        }

        if (browser.versions.mobile) { //判断是否是移动设备打开
            var ua = navigator.userAgent.toLowerCase(); //获取判断用的对象
            if (browser.versions.ios) {//移动设备为IOS
                alert("ios")
            }
            if (browser.versions.android) {//移动设备为android
                alert("android")
            }
            if (ua.match(/MicroMessenger/i) == "micromessenger") {//是否在微信打开
                alert("MicroMessenger")
            }
            if (ua.match(/WeiBo/i) == "weibo") {//是否是在微博中打开
                alert("WeiBo")
            }
            if (ua.match(/QQ/i) == "qq") {//是否在QQ打开
                alert("qq")
            }
        } else {
            //否则就是PC浏览器打开
            alert("pc");
        }

    });
</script>

（2）第二种方式：在vue中使用

<script>
    function test(){
         var u = navigator.userAgent,app = navigator.appVersion;
         //移动终端浏览器版本信息
         var trident=u.indexOf('Trident') > -1;//IE内核
         var  presto=u.indexOf('Presto') > -1; //opera内核
         var webKit=u.indexOf('AppleWebKit') > -1; //苹果、谷歌内核
         var gecko=u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1; //火狐内核
         var mobile=!!u.match(/AppleWebKit.*Mobile.*/); //是否为移动终端
         var ios=!!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
         var android=u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端或uc浏览器
         var iPhone=u.indexOf('iPhone') > -1; //是否为iPhone或者QQHD浏览器
         var iPad=u.indexOf('iPad') > -1; //是否iPad
         var webApp=u.indexOf('Safari') == -1; //是否web应该程序，没有头部与底部
         var language=(navigator.browserLanguage || navigator.language).toLowerCase();
         if(mobile){//判断是否是移动设备打开
            var ua = navigator.userAgent.toLowerCase(); //获取判断用的对象
            if (ios) {//移动设备为IOS
                alert("ios");
             }
             if (android) {//移动设备为android
                alert("android");
             }
             if (ua.match(/MicroMessenger/i) == "micromessenger") {//是否在微信打开
                alert("MicroMessenger");
             }
             if (ua.match(/WeiBo/i) == "weibo") {//是否是在微博中打开
                alert("WeiBo");
            }
            if (ua.match(/QQ/i) == "qq") {//是否在QQ打开
                alert("qq");
            }
        }else {//否则就是PC浏览器打开
            alert("pc");
        }
     }
</script>