客户端检测技术

客户端检测是javascript开发中最具争议的一个话题,由于浏览器之间存在差别,通常需要根据不同的浏览器能力分别编写不同的代码。

能力检测:

在编写代码之前先检测浏览器的能力。
例如,脚本在调用某个函数之前,可能先检测该函数是否存在。这种检测方法将开发人员从考虑具体的浏览器类型和版本中解放出来,让它们把注意力集中到相应的能力是否存在上。能力无法精确地检测特定的浏览器和版本。

怪癖检测:

怪癖实际上是浏览器实际中存在的bug,例如早期的Webkit中就存在一个怪癖,即它会在for-in循环中返回被隐藏的属性。怪癖检测通常设计到运行一小段代码,然后确定浏览器是否存在某个怪癖。怪癖检测应该只在某个怪癖会干扰脚本运行的情况下使用。

用户代理检测:

通过检测用户代理字符串类识别浏览器。用户代理字符串中包含大量与浏览器有关的信息,包括浏览器、平台、操作系统即浏览器版本。

检测优先级:能力检测>怪癖检测>用户代理检测(因为用户代理检测对用户代理字符串具有很强的依赖性)

《javascript高级程序设计》提供一下用户代理检测方法:

var client = function(){
        //呈现引擎
        var engine = {
                ie: 0,
                gecko: 0,
                webkit: 0,
                khtml: 0,
                opera: 0,

                //完整的版本号
                ver: null
        };

        // 浏览器
        var browser = {
                //主要浏览器
                ie: 0,
                firefox: 0,
                konq: 0,
                chrome: 0,
                safari: 0,

                // 具体版本号
                ver: null
        };

        // 平台、设备和操作系统
        var system = {
                win: false,
                mac: false,
                x11: false,

                // 移动设备
                iphone: false,
                ipod: false,
                nokiaN: false,
                winMobile: false,
                macMobile: false,

                // 游戏系统
                wii: false,
                ps: false
        };

        // 检测呈现引擎和浏览器
        var ua = navigator.userAgent;

        /*
            在每一次HTTP请求过程中,用户代理字符串是作为响应首部发送的,可以通过navigator.userAgent属性访问
            呈现引擎:
                    IE——————mozilla
                    gecko————————Firefox,当初gecko作为通过mozilla浏览器一部分开发
                    safari———————webkit,apple公司发布的web浏览器
                    chrome———————webkit
                    IOS和Android默认的浏览器都基于webkit
        */
        if(window.opera){
                engine.ver = browser.ver = window.opera.version();
                engine.opera = browser.opera = parseFloat(engine.ver);
        } else if( /AppleWebKit\/(\S+)/.test(ua)){
                engine.ver = RegExp["$1"];
                engine.webkit = parseFloat(engine.ver);

                // 确定是 Chrmoe 还是 Safari
                if(/Chrmoe\/(\S+)/.test(ua)){
                        browser.ver = RegExp["$1"];
                        browser.chrome = parseFloat(browser.ver);
                } else if(/Version\/(\S+)/.test(ua)){
                        browser.ver = RegExp["$1"];
                        browser.safri = parseFloat(browser.ver);
                } else {
                        // 近似的确定版本号
                        var safariVersion = 1;
                        if(engine.webkit < 100){
                                safariVersion = 1;
                        } else if (engine.webkit < 312){
                                safariVersion = 1.2;
                        } else if (engine.webkit < 412){
                                safariVersion = 1.3;
                        } else {
                                safariVersion = 2;
                        }

                        browser.safari = browser.ver = safariVersion;
                }
        } else if (/KHTML\/(\S+)/.test(ua) || /Knoqueror\/([^;]+)/.test(ua)){
                engine.ver = browser.ver = RegExp["$1"];
                engine.khtml = browser.konq = parseFloat(engine.ver);
        } else if (/rv:([^\)]+)\) Gecko\/\d{8}/.test(ua)){
                engine.ver = RegExp["$1"];
                engine.gecko = parseFloat(engine.ver);

                // 确定是不是Firefox
                if (/Firefox\/(\S+)/.test(ua)){
                        browser.ver = RegExp["$1"];
                        browser.firefox = parseFloat(browser.ver);
                }
        } else if (/MSIE ([^;]+)/.test(ua)){
                engine.ver = browser.ver = RegExp["$1"];
                engine.ie = browser.ie = parseFloat(engine.ver);
        }

        // 检测浏览器
        browser.ie = engine.ie;
        browser.opera = engine.opera;

        // 检测平台
        var p = navigator.platform;
        system.win = p.indexOf("Win") == 0;
        system.mac = p.indexOf("Mac") == 0;
        system.x11 = (p == "X11") || (p.indexOf("Linux") == 0 );

        // 检测 windows操作系统
    if (system.win){
                if (/Win(?:dows )?([^do]{2})\s?(\d+\.\d+)?/.test(ua)){
                        if (RegExp["$1"] == "NT"){
                                switch (RegExp["$2"]){
                                        case "5.0":
                                                system.win = "2000";
                                                brreak;
                                        case "5.1":
                                                system.win = "xp";
                                                break;
                                        case "6.0":
                                                system.win = "Vista";
                                                break;
                                        case "6.1":
                                                system.win = " Win7";
                                                break;
                                        default:
                                                system.win = "NT";
                                                break;
                                }
                        } else if (RegExp["$1"]){
                                system.wein = "ME";
                        } else {
                                system.win = RegExp["$1"];
                        }
                }
    }  

        // 移动设备
        system.iphone = ua.indexOf("iPhone") >  -1;
        system.ipod = ua.indexOf("iPod") > -1;
        system.nokiaN = ua.indexOf("NokiaN") > -1;
        system.winMobile = (system.win == "CE");
        system.macMobile = (system.iphone || system.ipod);

        // 游戏系统
        system.wii = ua.indexOf("Wii") > -1;
        system.ps = /playstation/i.test(ua);

        // 返回这些对象
        return {
                engine: engine,
                browser: browser,
                system: system
        };

}();

经验总结:
1,先检测达成目的的最常用特性,早期的ie不存在document.getElementById(),,应该先检测document.getElementById()后检测document.all。先检测最常用的特性可以保证代码最优化,因为在多数情况下都可以避免测试多个条件

2,测试到具体要用的特性。某个特性存在不一定意味着另外一个特性也存在。同时某个属性的存在不能确定对象是否存在该函数。例如,var result = isSortable({ sort : true}),并不能确定对象是否支持排序,最好的的方式是检测sort是不是一个函数:
function isSortable(object){
return typeof object.sort == "function";
}
但值得一提的是,ie8及其更早版本中的宿主对象是同归COM而非JScript实现,因此typeof document.createElement返回的是‘object‘而非‘function‘

客户端检测技术,布布扣,bubuko.com

时间: 2024-11-05 12:29:40

客户端检测技术的相关文章

JavaScript学习--Item36 客户端检测技术

JavaScript 客户端检测 JavaScript 客户端检测是指通过javascript,判断客户端的环境,诸如使用的浏览器和操作系统.客户端检测是一种行之有效的开发策略.但不到万不得已,就不要使用客户端检测.先设计通用的方案,然后根据浏览器之间的差异和各自的怪癖quirky,再使用特定于浏览器的技术增强该方案. user-agent字符串检测法是最原始的浏览器检测方式,每个访问网站的程序都必须提供一个user-agent字符来向服务器确定他的身份.navigator对象包含一些浏览器信息

javascript客户端检测技术

 1. Firefox    Gecko是firefox的呈现引擎.当初的Gecko是作为通用Mozilla浏览器一部分开发的,而第一个采用Gecko引擎的浏览器是Netscape6: 我们可以使用用户代理检测下:如下JS代码: var ua = navigator.userAgent; console.log(ua); 在windows下firefox下打印如下:    Mozilla/5.0 (Windows NT 6.1; WOW64; rv:38.0) Gecko/20100101 Fi

JavaScript高级程序设计学习笔记第九章--客户端检测

1.能力检测:能力检测的目标不是识别特定的浏览器,而是识别浏览器的能力.(我的理解就是识别浏览器能做什么不能做什么) 2.怪癖检测:目标是识别浏览器的特殊行为.但与能力检测确认浏览器支持什么能力不同,怪癖检测是想要知道浏览器存在什么缺陷(“怪癖”也就是 bug). 3.用户代理检测:争议最大的一种客户端检测技术.用户代理检测通过检测用户代理字符串来确定实际使用的浏览器.在每一次 HTTP 请求过程中,用户代理字符串是作为响应首部发送的,而且该字符串可以通过 JavaScript 的 naviga

功能检测技术 typeOf

Javascript与很多编程语言不同,它不能够控制其运行环境.再写php代码时,只要在服务器端部署了正确的版本,那么程序就绝对能够运行,对于其他python或ruby后端语言来说,也不存在什么灰色区域.Javascript就不同了,它与所有的前端语言一样,都需要各大浏览器的支持. 前端语言必须通过浏览器渲染页面时才能被运行和执行,服务器与客户端的浏览器通过HTTP请求进行通信,接受资源后的浏览器再进行渲染.有很多因素,诸如浏览器对各项功能的支持程度.网络连接速度.屏幕大小.渲染效率等,都是完全

第九章客户端检测

客户端检测 9.1能力检测 只要确定浏览器支持特定的能力,就能给出解决方案 if(object.propertyInQuestion){ } 两个概念:先检测达成目的的最常用的特性:检测实际要用到的特性 9.1.1更可靠的能力检测 尽可能使用typeof进行能力检测 在浏览器环境测试任何对象的某个特性是否存在使用如下函数: function isHostMethod(object, property) { var t = typeof object[property]; return t ==

伪AP检测技术研究

转载自:http://www.whitecell-club.org/?p=310 随着城市无线局域网热点在公共场所大规模的部署,无线局域网安全变得尤为突出和重要,其中伪AP钓鱼攻击是无线网络中严重的安全威胁之一. 受到各种客观因素的限制,很多数据在WiFi网络上传输时都是明文的,如一般的网页.图片等:甚至还有很多网站或邮件系统在手机用户进行登陆时,将帐号和密码也进行了明文传输或只是简单加密传输(加密过程可逆).因此,一旦有手机接入攻击者架设的伪AP,那么通过该伪AP传输的各种信息,包括帐号和密码

浅谈非法外联检测技术的演变

针对隔离内网,非法外联因其危害巨大,一直都是网络边界完整性防护的重中之重. 早期非法外联主要是指以电话拨号为主的私自连接互联网的行为,早期电话拨号还是非常方便的,如163拨号,263拨号等,只要有电话线,就可以随时拨号上网,缺点就是网速慢,收费高.针对早期电话拨号的检测技术是"双机"检测,即一台部署在内网做为扫描端,另一台部署在互联网做为接收端,技术原理大家可以在网上搜,技术实现相对简单,目前已是过时的技术了. 对非法外联的硬性监管要求,加上"双机"检测模式的过时,

Netty之心跳检测技术(四)

Netty之心跳检测技术(四) 一.简介 "心跳"听起来感觉很牛X的样子,其实只是一种检测端到端连接状态的技术.举个简单的"栗子",现有A.B两端已经互相连接,但是他们之间很长时间没有数据交互,那么A与B如何判断这个连接是否可用呢?我们通常的做法就是,让任何一方,例如我们让A端,定时的发送(例如每5秒钟)一句问候"Are you ok?",如果B都到来自A的问候,回了一句"GUN",A收到了来自B的信息,也不在乎B到底给我回了

JS学习9(客户端检测)

因为各个客户端能力的不同,要实现同一功能可能会需要不同的实现.这样就需要用到各种各样的客户端检测办法.值得一提的是,使用客户端检测是在万不得已的情况下才进行的,尽量使用通用的方法来实现想要的结果. 能力检测 能力检测的目标是识别浏览器的能力而不是识别特定的浏览器.只要确定当前浏览器有这个特性就可以执行相应的解决方案. 比如IE5之前没有document.getElementById(): function getElement(id){ if (document.getElementById){