Judge various browsers

With the development of the times and the advancement of technology, browsers such as Firefox and Google are currently the mainstream browsers, and IE gradually fades out of people's vision. However, front-end personnel still cannot ignore browser compatibility issues. Sometimes, we also need to make judgments about the browser. Moreover, the widespread use of WeChat today, plus the different aspects of WeChat and QQ, and android mobile devices and IOS mobile devices are even more different. Therefore, the browser's Judgment and the judgment of moving east equipment also appeared.
In the just-concluded project, Xiaobian encountered the need to perform a browser and determine whether to open it in the WeChat browser or open it in QQ. After finding a way to solve the problem, the editor believes that it is very important to grow together and share knowledge. Therefore, I will share the judgment method with you here.
(1) The first way: general use

<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) The second way: use in 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>

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=324651461&siteId=291194637