首页 web前端html&css正文

通过检测浏览器的UserAgent获取浏览器内核类型

ixiaoye html&css 2019-12-17 1388 0 UserAgent

在web开发过程经常需要获取浏览器类型,然后针对不同浏览器执行不同代码块,下面这段js代码简单明了却实现了识别pc浏览器还是移动设备的浏览器,还可以识别不同平台的浏览器内核以及热门应用内置的浏览器。

<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript"> 

var browser = {
        versions: function () {
            var u = window.navigator.userAgent,app = window.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: (window.navigator.browserLanguage || window.navigator.language).toLowerCase()
    };

    if (browser.versions.mobile) {//判断是否是移动设备打开。browser代码在下面
        var ua = window.navigator.userAgent.toLowerCase();//获取判断用的对象
        if (ua.match(/MicroMessenger/i) == "micromessenger") {
            // 微信浏览器
            alert('这是微信浏览器');
        } else if (ua.match(/WeiBo/i) == "weibo") {
            // 新浪微博客户端
            alert('这是新浪微博客户端');
        } else if (ua.match(/QQ/i) == "qq") {
            // 在QQ浏览器打开
            alert('这是QQ浏览器');
        } else if (browser.versions.ios && ua.match(/MicroMessenger/i) != "micromessenger") {
            // IOS终端
            alert('这是IOS终端');
        } else if (browser.versions.android && ua.match(/MicroMessenger/i) != "micromessenger") {
            // 安卓终端
            alert('这是安卓终端');
        }
    } else {
        // PC浏览器
        alert('在PC浏览器打开');
    }

</script>
</head>
<body>
</body>
</html>


评论