资讯专栏INFORMATION COLUMN

浏览器嗅探

SexySix / 1774人阅读

摘要:浏览器的嗅探主要基于对象的属性对浏览器的类型名称厂商以及运行环境等作出判断,满足不同生产环境的需求。值得一提的是,我在微信版本中测试其内置浏览器识别结果是,并不是微信环境。

浏览器的嗅探主要基于Window对象的Navigator属性对浏览器的类型、名称、厂商以及运行环境等作出判断,满足不同生产环境的需求。

常见的微信浏览器环境的判断:



    
        
    
    
        
    

以上代码js部分基本可以直接截取出作为微信浏览器运行环境下的判断,并提供了错误页内容。

值得一提的是,我在微信windows版本中测试其内置浏览器识别结果是Chrome,并不是微信环境MicroMessageer

Navigator对象

可以直接在浏览器命令行下使用window.navigator查看其包含的各种属性内容(取常用属性解释):

appName
返回浏览器的名称。在IE中,就是“Microsoft Internet Explorer”;在FireFox以及其他浏览器中,就是“Netscape”

appVersion
返回浏览器的平台和版本信息(通常以数字开始)。

platform
返回运行浏览器的操作系统平台。

onLine
返回指明系统是否处于脱机模式的布尔值。

userAgent!!!
返回由客户机发送服务器的 user-agent 头部的值。

userAgent 属性是一个只读的字符串,声明了浏览器用于 HTTP 请求的用户代理头的值。

一般来讲,它是在 navigator.appCodeName 的值之后加上斜线navigator.appVersion 的值构成的。
例如:Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.2; SV1; .NET CLR 1.1.4322)。

注:用户代理头:user-agent header。

总结的浏览器嗅探插件
    ;
    var _BROWSER = (function() {
        function detect() {
            // start browser detect
            var nVer = navigator.appVersion,
                nAgt = navigator.userAgent,
                browser = navigator.appName,
                version = "" + parseFloat(navigator.appVersion),
                majorVersion, nameOffset, verOffset, ix, network = "unknown";
            // Opera
            if ((verOffset = nAgt.indexOf("Opera")) != -1) {
                browser = "Opera";
                version = nAgt.substring(verOffset + 6);
                if ((verOffset = nAgt.indexOf("Version")) != -1) {
                    version = nAgt.substring(verOffset + 8);
                }
            }
            // Opera Next
            if ((verOffset = nAgt.indexOf("OPR")) != -1) {
                browser = "Opera";
                version = nAgt.substring(verOffset + 4);
            }
            // MSIE
            if ((verOffset = nAgt.indexOf("MSIE")) != -1) {
                browser = "Microsoft Internet Explorer";
                version = nAgt.substring(verOffset + 5);
            }
            // Chrome
            if ((verOffset = nAgt.indexOf("Chrome")) != -1) {
                browser = "Chrome";
                version = nAgt.substring(verOffset + 7);
            }
            // Safari
            if ((verOffset = nAgt.indexOf("Safari")) != -1) {
                browser = "Safari";
                version = nAgt.substring(verOffset + 7);
                if ((verOffset = nAgt.indexOf("Version")) != -1) {
                    version = nAgt.substring(verOffset + 8);
                }
            }
            // Firefox
            if ((verOffset = nAgt.indexOf("Firefox")) != -1) {
                browser = "Firefox";
                version = nAgt.substring(verOffset + 8);
            }
            // MSIE 11+
            if (nAgt.indexOf("Trident/") != -1) {
                browser = "Microsoft Internet Explorer 11+";
                version = nAgt.substring(nAgt.indexOf("rv:") + 3);
            }
            // WeiXin
            if (nAgt.toLowerCase().indexOf("micromessenger") != -1) {
                browser = "WeiXin";
                if (nAgt.indexOf("NetType/WIFI") != -1) {
                    network = "WIFI";
                } else if (nAgt.indexOf("NetType/2G") != -1) {
                    network = "2G";
                } else if (nAgt.indexOf("NetType/3G+") != -1) {
                    network = "3G+";
                } else if (nAgt.indexOf("NetType/4G") != -1) {
                    network = "4G";
                }
                verOffset = nAgt.lastIndexOf("/")
                version = nAgt.substring(verOffset + 1);
                // if (browser.toLowerCase() == browser.toUpperCase()) {
                //     browser = navigator.appName;
                // }
            }
            // Other browsers
            else if ((nameOffset = nAgt.lastIndexOf(" ") + 1) < (verOffset = nAgt.lastIndexOf("/"))) {
                browser = nAgt.substring(nameOffset, verOffset);
                version = nAgt.substring(verOffset + 1);
                if (browser.toLowerCase() == browser.toUpperCase()) {
                    browser = navigator.appName;
                }
            }
    
            // trim the version string
            if ((ix = version.indexOf(";")) != -1) version = version.substring(0, ix);
            if ((ix = version.indexOf(" ")) != -1) version = version.substring(0, ix);
            if ((ix = version.indexOf(")")) != -1) version = version.substring(0, ix);
            majorVersion = parseInt("" + version, 10);
            if (isNaN(majorVersion)) {
                version = "" + parseFloat(navigator.appVersion);
                majorVersion = parseInt(navigator.appVersion, 10);
            }
            // mobile version
            var mobile = /Mobile|mini|Fennec|Android|iP(ad|od|hone)/.test(nVer);
    
            // start system detect
            var os = "";
            var clientStrings = [{
                s: "Windows 10",
                r: /(Windows 10.0|Windows NT 10.0)/
            }, {
                s: "Windows 8.1",
                r: /(Windows 8.1|Windows NT 6.3)/
            }, {
                s: "Windows 8",
                r: /(Windows 8|Windows NT 6.2)/
            }, {
                s: "Windows 7",
                r: /(Windows 7|Windows NT 6.1)/
            }, {
                s: "Windows Vista",
                r: /Windows NT 6.0/
            }, {
                s: "Windows Server 2003",
                r: /Windows NT 5.2/
            }, {
                s: "Windows XP",
                r: /(Windows NT 5.1|Windows XP)/
            }, {
                s: "Windows 2000",
                r: /(Windows NT 5.0|Windows 2000)/
            }, {
                s: "Windows ME",
                r: /(Win 9x 4.90|Windows ME)/
            }, {
                s: "Windows 98",
                r: /(Windows 98|Win98)/
            }, {
                s: "Windows 95",
                r: /(Windows 95|Win95|Windows_95)/
            }, {
                s: "Windows NT 4.0",
                r: /(Windows NT 4.0|WinNT4.0|WinNT|Windows NT)/
            }, {
                s: "Windows CE",
                r: /Windows CE/
            }, {
                s: "Windows 3.11",
                r: /Win16/
            }, {
                s: "Android",
                r: /Android/
            }, {
                s: "Open BSD",
                r: /OpenBSD/
            }, {
                s: "Sun OS",
                r: /SunOS/
            }, {
                s: "Linux",
                r: /(Linux|X11)/
            }, {
                s: "iOS",
                r: /(iPhone|iPad|iPod)/
            }, {
                s: "Mac OS X",
                r: /Mac OS X/
            }, {
                s: "Mac OS",
                r: /(MacPPC|MacIntel|Mac_PowerPC|Macintosh)/
            }, {
                s: "QNX",
                r: /QNX/
            }, {
                s: "UNIX",
                r: /UNIX/
            }, {
                s: "BeOS",
                r: /BeOS/
            }, {
                s: "OS/2",
                r: /OS/2/
            }, {
                s: "Search Bot",
                r: /(nuhk|Googlebot|Yammybot|Openbot|Slurp|MSNBot|Ask Jeeves/Teoma|ia_archiver)/
            }];
            for (var id in clientStrings) {
                var cs = clientStrings[id];
                if (cs.r.test(nAgt)) {
                    os = cs.s;
                    break;
                }
            }
            var osVersion = "";
            if (/Windows/.test(os)) {
                osVersion = /Windows (.*)/.exec(os)[1];
                os = "Windows";
            }
            switch (os) {
                case "Mac OS X":
                    osVersion = /Mac OS X (10[.\_d]+)/.exec(nAgt)[1];
                    break;
                case "Android":
                    osVersion = /Android ([.\_d]+)/.exec(nAgt)[1];
                    break;
                case "iOS":
                    osVersion = /OS (d+)_(d+)_?(d+)?/.exec(nVer);
                    osVersion = osVersion[1] + "." + osVersion[2] + "." + (osVersion[3] | 0);
                    break;
            }
            //detect data
            var params = {};
            params.os = os; //操作系统
            params.osVersion = osVersion ? osVersion : "unknown"; //操作系统版本
            params.mobile = mobile; //是否移动端访问
            params.browser = browser; //浏览器
            params.browserVersion = version; //浏览器版本
            params.browserMajorVersion = majorVersion; //浏览器major版本
    
            //输出对象
            return params;
    
        }
        return {
            detect: detect
        }
    })();
    

借鉴了https://segmentfault.com/q/10...,但其代码有严重漏洞,尤其在检测是否在微信环境居然以网络类型为条件,坑死我了。在此将其封装为插件。

调用方法
BROSWER.detect()
返回结果示例
{
    "os":"Windows",
    "osVersion":"7",
    "mobile":false,
    "browser":"Chrome",
    "browserVersion":"59.0.3071.115",
    "browserMajorVersion":59
}

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/89177.html

相关文章

  • Elasticsearch Java Low Level REST Client(嗅探器)

    摘要:嗅探器允许从正在运行的集群中自动发现节点并将它们设置到现有的实例的最小的库,它默认使用节点信息检索属于集群的节点,并使用解析获得的响应。可以在找到客户端嗅探器的。 嗅探器 允许从正在运行的Elasticsearch集群中自动发现节点并将它们设置到现有的RestClient实例的最小的库,它默认使用节点信息api检索属于集群的节点,并使用jackson解析获得的json响应。 与Elas...

    hiYoHoo 评论0 收藏0
  • 前端Tank技能---览器嗅探

    摘要:由于那个时候是霸主,这也导致微软推出的时候必须把自己伪装成浏览器,于是他们的也是以开头的。各个版本典型的如下其中之后的就是当前的版本号。的几个版本的其中之后的是版本号提供了专门的浏览器标志,就是属性。目前,的是其中,版本号在之后的数字。 浏览器嗅探 浏览器嗅探不用说了,为了更好的性能,会需要各种各样的兼容性处理,自然就会有针对不同浏览器的判断.一般的代码中,我们都是通过navigato...

    Blackjun 评论0 收藏0

发表评论

0条评论

SexySix

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<