通过JS判断当前浏览器的类型

通过JS判断当前浏览器的类型，对主流浏览器Chrome、Edge、Firefox、UC浏览器、QQ浏览器、360浏览器、搜狗浏览器的userAgent属性值来判断用户使用的是什么浏览器。

不同浏览器的userAgent值

chrome浏览器

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.103 Safari/537.36

Edge浏览器

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.140 Safari/537.36 Edge/18.17763

QQ浏览器

Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.25 Safari/537.36 Core/1.70.3722.400 QQBrowser/10.5.3739.400

UC浏览器

Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 UBrowser/6.2.4098.3 Safari/537.36

360浏览器

Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; InfoPath.3; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729; rv:11.0) like Gecko

搜狗浏览器

Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36 SE 2.X MetaSr 1.0

<!DOCTYPE html>
<html lang="zh-CN">
 
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
 
    </style>
 
</head>
 
<body>
    <input id='btn' type='button' value='获取浏览器信息' />
    <div id='div1'></div>
 
    <script>
        var oBtn = document.getElementById('btn');
        var oDiv = document.getElementById('div1');
        var browserName = '';
        function brower() {
            /* 浏览器特征：Edge——Edge浏览器，QQBrowser-QQ浏览器，UBrowser-UC浏览器，Firefox-火狐浏览器，Trident-360浏览器，
             * 其它浏览器可能包含的特征：chrome-chrome浏览器
             *
             * 
             * 
             */
            var browserInf = navigator.userAgent.toLowerCase();
 
            if (browserInf.indexOf('edge') >= 0) {
 
                browserName = 'Edge浏览器';
 
            } else if (browserInf.indexOf('qqbrowser') >= 0) {
 
                browserName = 'QQ浏览器';
 
            } else if (browserInf.indexOf('ubrowser') >= 0) {
 
                browserName = 'UC浏览器';
 
            } else if (browserInf.indexOf('firefox') >= 0) {
 
                browserName = '火狐浏览器';
 
            } else if (browserInf.indexOf('trident') >= 0) {
 
                browserName = '360浏览器';
 
            } else if (browserInf.indexOf('chrome') >= 0) {
 
                browserName = 'Chrome浏览器';
 
            } else {
 
                browserName = '未知是什么鸟浏览器';
                 
            }
            console.log(navigator.userAgent);//=>在控制台中查看navigator.userAgent
        }
 
        oBtn.onclick = function () {
 
            brower();
 
            oDiv.innerHTML = '浏览器为' + browserName;
        }
 
    </script>
</body>
 
</html>