浏览器嗅探

最新推荐文章于 2024-10-09 22:33:47 发布
最新推荐文章于 2024-10-09 22:33:47 发布
阅读量565 收藏
点赞数
文章标签： python 移动开发 操作系统
原文链接：https://segmentfault.com/a/1190000011629146
版权

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

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

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
    </head>
    <body>
        <script type="text/javascript">
            var ua = navigator.userAgent.toLowerCase();
            var isWeixin = ua.indexOf('micromessenger') != -1;
            var isAndroid = ua.indexOf('android') != -1;
            var isIos = (ua.indexOf('iphone') != -1) || (ua.indexOf('ipad') != -1);
            if (!isWeixin) {
                document.head.innerHTML = '<title>抱歉，出错了</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0"><link rel="stylesheet" type="text/css" href="https://res.wx.qq.com/open/libs/weui/0.4.1/weui.css">';
                document.body.innerHTML = '<div class="weui_msg"><div class="weui_icon_area"><i class="weui_icon_info weui_icon_msg"></i></div><div class="weui_text_area"><h4 class="weui_msg_title">请在微信客户端打开链接</h4></div></div>';
            }
        </script>
    </body>
</html>

以上代码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
}
weixin_33758863
关注
Jquery实现浏览器嗅探器特效
06-01
本教程将详细讲解如何利用jQuery实现一个浏览器嗅探器特效，帮助开发者识别用户正在使用的浏览器类型、内核版本以及设备的基础信息。 首先，要实现浏览器嗅探器，我们需要理解jQuery中的`navigator`对象。这个对象...
猫爪浏览器媒体资源嗅探插件.crx
12-04
猫抓插件是一款很好的浏览器媒体资源嗅探的工具，喜欢的小伙伴赶快下载吧。本插件为.crx格式，谷歌浏览器或者360浏览器等主流浏览器都可以添加使用，具体添加插件的方法小伙伴百度就有了哈，小编就不多介绍了，有的小伙伴之前可能使用过猫抓，是不是很方便呢！
浏览器嗅探器
worn_xiao的博客
05-07 810
var BrowserDetect = { init: function () { this.browser = this.searchString(this.dataBrowser) || "An unknown browser"; this.version = this.searchVersion(navigator.userAgent) || this.searchVersi
【Chrome浏览器插件--资源嗅探猫抓】
最新发布
游戏乐趣的博客
10-09 1333
猫抓插件在下载一些网站上的音视频资源时非常方便，也可以下载其它类型的资源如图片，HTML，CSS等．。
jquery实现浏览器嗅探器特效特效代码
03-20
本文将深入探讨如何使用jQuery实现一个浏览器嗅探器特效，以揭示用户所使用的浏览器类型、内核版本号及设备基础信息。 首先，我们需要理解浏览器嗅探的基本概念。浏览器嗅探是一种技术，通过JavaScript代码检测用户...
jquery插件推荐浏览器嗅探userAgent
12-08
浏览器嗅探(userAgent)是一种常见的前端技术，用于识别用户访问网站时所使用的浏览器类型和版本。在jQuery 1.7.x版本之后，官方不再支持浏览器嗅探，而是提倡使用特性检测来实现跨浏览器的兼容性。然而，在某些情况...
电脑软件m3u8-下载合并配合浏览器嗅探插件使用.rar
10-23
"电脑软件m3u8-下载合并配合浏览器嗅探插件使用.rar" 这个标题提到了几个关键概念。首先，“m3u8”是一种用于流媒体的文件格式，常用于在线视频播放。它是一个文本文件，包含指向多个媒体片段的URL，这些片段在播放...
资源嗅探利器：浏览器插件扩展助你轻松筛选与捕捉页面资源
小飞技术
08-20 757
一款支持资源嗅探的浏览器插件扩展，能够帮助你筛选列出当前页面的资源。提供嗅探 缓存捕捉 视频录制等各种工具帮助抓取资源。可以在设置内添加想要抓取的资源类型，包括图片等资源。（能下载视频自带ffmpeg，解析m3u8并转码下载）
js 浏览器嗅探
陌上尘的博客
07-13 2886
用于检测浏览器和操作系统的信息 嗅探: window.navigator.userAgent 获取当前文档所运行的浏览器的名称以及版本. 通过判断其中是否含有”chrome / Firefox / Safria / IE / Opera” 这些浏览器的关键字可用于浏览器的兼容问题 var brower = navigator.userAgent; if(brower.indexOf("...
嗅觉浏览器（安卓）
C891212的博客
06-17 4804
浏览器主页面设计比较简约，但它的功能却非常强大，它支持多个搜索引擎，并且对这些引擎进行了分类，分为了搜索，学术和其他等等，如果你只想搜学术类的内容那么就选择学术，推荐的搜索引擎就全部都是有关学术的。浏览器还支持嗅探网页中的视频和各种音频，能轻松的就能下载网页视频和音乐。另外还可以对广告拦截订阅，Ul界面自定义，搜索引擎管理，自定义UA设置等等，实现个性化设置。还内置了lDM+，M3U8，ADM，ADM+lDM，闪电下载器，全能下载器等等，都能任意切换，下载资源超级方便。关键是浏览器还支持via插件和grea
IE嗅探器
01-28
开发人员常用IE 插件，用途很多。
谷歌浏览器Chrome资源嗅探插件.rar
12-25
谷歌浏览器Chrome资源嗅探插件，直接解压然后加载即可。 插件可以检测当前页面的图片资源。
idman(浏览器视频嗅探软件)
10-16
idman 浏览器 视频 嗅探 软件 idman 浏览器 视频 嗅探 软件
javascript学习——浏览器嗅探优化技术
u013237862的博客
01-12 812
思路一：延时加载 在使用的时候再判断该用哪个方法，并且在判断完了之后改写函数。之后再调用的时候，可以按照检测之后得结果进行操作。 var addHandler = function(target,eventType,handle){ if(target.addEventListener){ addHandler = function(target,eventType,han
开源实用！猫抓媒体嗅探浏览器插件
2401_83063795的博客
05-25 2129
网络资源，一触即发
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值