[Javascript]客户端检测

最新推荐文章于 2024-05-21 15:21:28 发布
转载 最新推荐文章于 2024-05-21 15:21:28 发布 · 76 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/ljk001/p/7999844.html
文章标签：

#javascript #ViewUI

本文探讨了客户端检测的不同策略，包括能力检测、怪癖检测和用户代理检测，并提供了具体示例代码。重点介绍了如何检测浏览器功能、识别浏览器特性和平台。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

客户端检测是一种行之有效的开发策略。但不到万不得已，就不要使用客户端检测。先设计通用的方案，然后根据浏览器之间的差异和各自的怪癖quirky，再使用特定于浏览器的技术增强该方案。

能力检测 Feature Detection

能力检测（又称特性检测）目标是识别浏览器的能力而不是识别特定的浏览器。只需根据浏览器支持的功能给出解决方案。

能力检测作为确定下一步解决方案的依据，而不是用它来判断用户使用的是什么浏览器。

基本模式：

if( object.propertyInQuestion){
    //使用 object.propertyInQuestion
}

两个重要的概念：
第一个概念是先检测达成目的的最常用的特性。先检测最常用的特性，可以保证代码最优化，因为在多数情况下都可以避免测试多个条件。
第二个概念是必须测试实际要用到的特性。一个特性存在，不一定意味着另一个特性也存在。

 

更可靠的能力检测

确定一个对象是否支持排序，检测对象是否支持sort()方法。

//只检测了是否存在相应的方法
function isSortable(object){
       return !!object.sort; }

var result= isSortable({sort:true});

检测某个属性是否存在并不能确定对象是否支持排序。，检测sort是不是一个函数。

function isSortable(object){
       return  typeof object.sort == "function ";  
}

尽量使用typeof进行能力检测

function hasCreateElement(){
       return  typeof document.createElement =="function ";  
}

IE8之前的版本返回false.因为DOM对象是宿主对象，是通过COM而不是JScript实现的，document.createElement()函数是一个COM对象。IE9已更正。

 var xhr=new ActiveXObject("Microsoft.XMLHttp");
 if(xhr.open){ //error //TO-DO }

直接把函数属性访问会导致JS错误。typeof xhr.open 返回“unknown”

在浏览器环境测试任何对象的某个特性是否存在使用如下函数：

复制代码 
    //Peter Michaux
    function isHostMethod(object, property) {
        var t = typeof object[property]; return t == 'function' || (!!(t == 'object' && object[property])) || t == 'unknown'; } result = isHostMethod(xhr, "open"); //true result = isHostMethod(xhr, "foo"); //false
复制代码

检测某个或某几个特性并不能够确定浏览器。实际上，根据浏览器不同将能力组合起来是更可取的方式。如果知道自己的应用程序需要使用某些特定的浏览器特性，那么最好是一次性检测所有相关特性，而不要分别检测。

复制代码 
//确定浏览器是否支持 Netscape 风格的插件
var hasNSPlugins = !!(navigator.plugins && navigator.plugins.length );

//确定浏览器是否具有 DOM1 级规定的能力 var hasDOM1 = !!(document.getElementById && document.createElement && document.getElementByTagName);
复制代码

 

延伸：

http://peter.michaux.ca/

http://peter.michaux.ca/articles/feature-detection-state-of-the-art-browser-scripting

怪癖检测  Quirkys Detection

目标识别浏览器特殊的行为，与能力检测不同，是想知道浏览器存在的什么缺陷.运行一小段代码，以确定某一特性不能正常工作.

“怪癖”都是个别浏览器所独有的，而且通常被归为 bug。由于检测“怪癖”涉及运行代码，因此建议仅检测那些对你有直接影响的“怪癖”，而且最好在脚本一开始就执行此类检测，以便尽早解决问题。

例如，IE中存在的一个 bug ，即如果某个实例属性与标记为 [[DontEnum]] 的某个原型属性同名，那么该实例属性将不会出现在 fon-in 循环当中。可以使用如下代码来检测这种“怪癖”：

复制代码 
var hasDontEnumQuirk = function(){
    var o = { toString : function(){}}; for( var prop in o){ if( prop == "toString"){ return false; } } return true; }();
复制代码

 

用户代理检测

　　争议最大的一种客户端检测技术。用户代理检测通过检测用户代理字符串来确定实际使用的浏览器。在每一次HTTP请求过程中，用户代理字符串是作为响应首部发送的，而该字符串可以通过 JavaScript 的 navigator.userAgent 属性访问。在服务器端，通过检测用户代理字符串来确定用户使用的浏览器是一种常用而且广为接受的做法。而在客户端，用户代理检测一般被当作一种万不得已才使用的做法，其优先级排在能力检测和怪癖检测之后。

　　电子欺骗(spoofing)是指 浏览器通过在自己的用户带来字符串加入一些错误或误导性信息，达到欺骗服务器的目的。

　　阅读下面内容最好事先了解下用户代理字符串的知识，请阅读博文《用户代理字符串简史》。　

用户代理字符串检测技术

　　当你了解用户代理字符串发展和使用方式后，使用客户端检测技术检测出特定的浏览器不是一个轻松的事情。一般知道呈现引擎和最低限度的版本就足以决定正确的操作方法。

1.识别呈现引擎

　　确切的知道浏览器的名字和版本号不如确定他们使用的是什么呈现引擎。如果Firefox、Camino 和 Netsacpe 都使用相同版本的 Gecko ，那么他们一定支持相同的特性。类似的，不管是什么浏览器，只要它跟 Safari 3 使用的是同一个版本的 WebKit，那么该浏览器也就跟 Safari 3 具备同样的功能。因此，我们需要编写的脚本将主要检测五大呈现引擎： IE、Gecko、WebKit、KHTML 和 Opera1。

　　注1：现在Opera 和 Chrome将采用基于WebKit开发自主渲染引擎Blink。

　　模块增强模式封装检测脚本。

复制代码 
var client = function(){
//呈现引擎
    var engine = { ie : 0, gecko : 0, webkit : 0, khtml : 0, opera : 0, //具体的版本号 ver : null }; //再次检测呈现引擎、平台和设备 return { engine : engine }; }();
复制代码

　　如果检测到那个呈现引擎，就以浮点数值形式将该引擎的版本号写入相应的属性。而呈现引擎的完整版本是一个字符串，则被写入ver属性。

复制代码 
if(client.engine.ie){   //如果是IE ，engine.ie的值应大于0
    //针对IE
} else if (client.engine.gecko > 1.5) { if(client.engine.ver == "1.8.1"){ //to-do  } }
复制代码

　　检测到一个呈现引擎后，其 client.engine 中对应的属性将被设置成一个大于 0 的值，该值可以转换成布尔值的 true。这样就可以在 if 语句中检测相应的属性，以确定当前使用的呈现引擎，连具体的版本号都不需要考虑。鉴于每个属性都包含一个浮点数值，因此有可能丢失某些版本信息。例如，将字符串"1.8.1"传入 parseFloat() 后悔得到数值 1.8。不过，在必要的时候，可以检测 ver 属性，该属性中保存着完整的版本信息。

　　正确的识别呈现引擎关键是检测顺序要正确。

　　首先应该检测的是 Opera，因为它的用户代理字符串可能完全模仿其他浏览器。任何情况下其用户代理字符串不会将其标识为(详情请阅读博文《用户代理字符串简史》)，就是所谓信不信由你，反正我是不信。

//Opera 5起支持window.opera对象
if ( window.opera ){
    engine.ver = window.opera.version();  //Opera 7.6起返回浏览器版本字符串 engine.opera = parseFloat( engine.ver ); }

　　其次检测 WebKit.因为WebKit的用户代理字符串包含“Gecko”和“KHTML”，若先检测他们，可能会出现错误的结论。

复制代码 
//AppleWebKit独一无二
var ua = navigator.userAgent;

if ( window.opera ){ engine.ver = window.opera.version(); engine.opera = parseFloat( engine.ver ); } else if ( /AppleWebKit\/(\S+)/.test(ua)){ engine.ver = RegExp["$1"]; engine.webkit = parseFloat(engine.ver); }
复制代码

　　仅供参考，不保证精确。

Safari  最低限度的WebKit版本号Safari  最低限度的WebKit版本号
 1.0-1.0.2 85.71.3.2  312.8
 1.0385.8.2 2.0  412
1.1-1.1.1 100 2.0.1 412.7 
1.2.2 125.2 2.0.2 416.11 
1.2.3 125.4 2.0.3417.9 
1.2.4 125.5.5 2.0.4418.8 
1.3 312.1 3.0.4 523.10 
1.3.1321.5 3.1 525 

 

　　接下来测试 KHTML。KHTML的用户代理字符串包含“Gecko”，所以在排除KHTML之前是无法正确检测基于Gecko的浏览器。Konqueror 3.1及更早的版本不包含KHTML的版本，要使用Konqueror的版本来替代。

复制代码 
var ua = navigator.userAgent;

if ( window.opera ){
    engine.ver = window.opera.version();
    engine.opera = parseFloat( engine.ver ); } else if ( /AppleWebKit\/(\S+)/.test(ua)){ engine.ver = RegExp["$1"]; engine.webkit = parseFloat(engine.ver); } else if ( /KHTML\/(\S+)/.test(ua) || /Konqueror\/([^;]+)/.test(ua)){ engine.ver = RegExp["$1"]; engine.khtml = parseFloat(engine.ver); }
复制代码

 　　下面我们就可以准确的检测Gecko。Gecko的版本号位于字符串“rv:”与一个闭括号之间，还要查找“Gecko/”后的8个数字。

//Windows XP 下的 Firefox 2.0.0.11 :
Mbzilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.11) Gecko/20071127 Firefox/2.0.
复制代码 
var ua = navigator.userAgent;

if ( window.opera ){
    engine.ver = window.opera.version();
    engine.opera = parseFloat( engine.ver ); } else if ( /AppleWebKit\/(\S+)/.test(ua)){ engine.ver = RegExp["$1"]; engine.webkit = parseFloat(engine.ver); } else if ( /KHTML\/(\S+)/.test(ua) || /Konqueror\/([^;]+)/.test(ua)){ engine.ver = RegExp["$1"]; engine.khtml = parseFloat(engine.ver); } else if ( /rv:([^\)]+)\) Gecko\/\d{8}/.test(ua)){ engine.ver = RegExp["$1"]; engine.gecko = parseFloat(engine.ver); } 
复制代码
Firefox版本号 最低限度的Gecko版本号Firefox版本号 最低限度的Gecko版本号
1.01.7.53.51.9.1
1.51.8.03.61.9.2
2.01.8.14.02.0.0
3.01.9.0  

最后是IE.IE版本号位于MSIE的后面。

复制代码 
var ua = navigator.userAgent;

if ( window.opera ){
    engine.ver = window.opera.version();
    engine.opera = parseFloat( engine.ver ); } else if ( /AppleWebKit\/(\S+)/.test(ua)){ engine.ver = RegExp["$1"]; engine.webkit = parseFloat(engine.ver); } else if ( /KHTML\/(\S+)/.test(ua) || /Konqueror\/([^;]+)/.test(ua)){ engine.ver = RegExp["$1"]; engine.khtml = parseFloat(engine.ver); } else if ( /rv:([^\)]+)\) Gecko\/\d{8}/.test(ua)){ engine.ver = RegExp["$1"]; engine.gecko = parseFloat(engine.ver); } else if (/MSIE ([^;]+)/.test(ua)){ engine.ver = browser.ver = RegExp["$1"]; engine.ie = browser.ie = parseFloat(engine.ver); }
复制代码
 2.识别浏览器

　　识别了浏览器的呈现引擎就足以为我们采取正确的操作提供依据了。可是，只有呈现引擎还不能够说明存在所需的JavaScript功能。相同内核的浏览器的JavaScript有可能引擎不一样：safari 和chrome。

复制代码 
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, opera : 0, chrome : 0, safari : 0, //具体的版本 ver : null }; //再次检测呈现引擎、平台和设备 return { engine : engine, browser : browser }; }();
复制代码

　　由于大多数浏览器与其呈现引擎密切相关，所以下面示例中检测浏览器的代码与呈现引擎的代码是混合在一起的

复制代码 
//检测呈现引擎及浏览器
var ua = navigator.userAgent;

if ( window.opera ){ engine.ver = window.opera.version(); engine.opera = parseFloat( engine.ver ); } else if ( /AppleWebKit\/(\S+)/.test(ua)){ engine.ver = RegExp["$1"]; engine.webkit = parseFloat(engine.ver); //确定是Chrome 还是 Safari if ( /Chrome\/(\S+)/.test(ua)){ browser.ver = RegExp["$1"]; browser.chrome = parseFloat(browser.ver); } else if ( /Version\/(S+)/test(ua)){ browser.ver = RegExp["$1"]; borwser.safari = parseFloat(browser.ver); } else { //近似的确定版本号 var safariVersion = 1; if (engine.webkit < 100 ){ safariVersion = 1; } else if (engine.webkit < 312){ safariVersoin = 1.2; } else if (engine.webkit < 412){ safariVersion = 1.3; } else { safariVersion = 2; } browser.safari = browser.ver = safariVersion; } } else if ( /KHTML\/(\S+)/.test(ua) || /Konqueror\/([^;]+)/.test(ua)){ engine.ver = RegExp["$1"]; engine.khtml = 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); }
复制代码

 我们就可以这样判断了：

复制代码 
if(client.engine.webkit){   
    if (client.browser.chrome) {

    }else if (client.browser.safari){ } } else if (client.engine.gecko) { if (client.browser.firefox) { }else{ 　　　　 } }
复制代码
3.识别平台

　　很多时候，只要知道呈现引擎就可以编写出适合的代码了，但在有些情况下，平台可能是必须关注的问题。三大主流平台：Windows、Mac、Unix（Linux）为了检测这些平台，需要再添加一个对象：

复制代码 
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, opera : 0, chrome : 0, safari : 0, //具体的版本 ver : null }; var system = { win : false, mac : false, xll : false }; //再次检测呈现引擎、平台和设备 return { engine : engine, browser : browser, system : system }; }(); //navigator.platform值Win32 、Win64、MacPPC、MacIntel、X11、Linux i686 var p = navigator.platform; system.win = p.indexOf("Win") == 0; systemp.mac = p.indexOf("Mac") == 0; system.xll = (p.indexOf("Xll")) == 1 || (p.indexOf("Linux") == 0);
复制代码
 

转载于:https://www.cnblogs.com/ljk001/p/7999844.html

《客户端性能测试基本流程》
qq_34381178的博客
12-02 5097
为了更好的让小伙伴，了解一个项目的客户端性能测试的流程，在这里简单的进行了整理。
你不知道的JavaScript--Item36 客户端检测技术
小平果的欢乐谷
03-27 2030
JavaScript 客户端检测JavaScript 客户端检测是指通过javascript，判断客户端的环境，诸如使用的浏览器和操作系统。客户端检测是一种行之有效的开发策略。但不到万不得已，就不要使用客户端检测。先设计通用的方案，然后根据浏览器之间的差异和各自的怪癖quirky，再使用特定于浏览器的技术增强该方案。user-agent字符串检测法是最原始的浏览器检测方式，每个访问网站的程序都必须提
软件测试之客户端（Client）测试
热门推荐
摩天轮的幸福
01-13 1万+
Client测试的特点     Client测试也叫做客户端测试，他是测试安装在用户机器上的应用程序的各个功能是否可以正常运行     需要现在本机安装Client程序包，然后通过运行Client程序，进行各种数据的输入，保存等操作。     测试内容包括：安装测试、卸载测试、用户界面测试、功能测试、字符输入测试、提示信息测试、超链接测试、操作按钮测试、菜单测试、视频音频测试、程
客户端性能测试基础知识
x_xingduo_2315的博客
10-31 1408
腾讯旗下的perfdog可以用于检测客户端帧率、CPU甚至GPU等数据情况，关于perfdog的使用请参考官网说明：https://perfdog.qq.com/用例设计时，尽量保持单一变量，从而使得检测数据更具有说服力测试过程，每个步骤尽量在ferfdog中的timeline（时间轴）上面的tag编写清除，便于对比与定位问题收集录制的文件命名尽量用下划线拼接，便于阅读，如:小米6x_主线。
客户端SDK测试是什么？如何测？
最新发布
NHB456789的博客
05-21 1440
在云信IM登录的场景，登录时可能收到大量同步数据包和离线消息包，那么对这些数据包的解析以及本地储存的性能就要进行保证，否则可能出现登录响应很慢甚至卡住的问题，所以测试时就需要考虑这个场景的性能。在涉及到多媒体资源或音视频通信，弱网下测试的需求较多，并且弱网下的处理通常需要反复优化和对比，不仅是新老版本效果对比，还包括竞品的效果对比测试。基于接口调用的自动化测试，需要有产品的思路、开发的知识和测试的思维，做起来有难度。基于接口调用的测试，包括对单个接口的测试，也包括业务场景的覆盖。
jsp标签02
hjzhzhshhs的博客
04-06 578
foreach标签的流程： ①、编写助手类 public class ForeachTag extends BodyTagSupport { //存放数据源 private List<?> items; //每次循环获取的对象放入pageContext中，并以var属性的值为key进行保存 //示例： 页面上标签var属性指定为item，则每次循环取出的对象（obj）将执行如下： //pageContext.setAttribute...
Javascript实现检测客户端类型代码封包
10-23
在探讨如何使用JavaScript检测客户端类型时，首先需要理解用户代理字符串（User-Agent string）的概念和作用。用户代理字符串是一个包含浏览器、操作系统、设备等信息的标识，用于告知服务器其发出的请求类型。尽管...
FCClientJS:SkyBiometry人脸检测和识别API JavaScript客户端库
05-08
SkyBiometry人脸检测和识别API JavaScript客户端库。 有关API和返回值的更多信息，请访问。 在您的创建一个应用程序。 这将生成一对字符串，即API_KEY和API_SECRET。 修改“ example / index.html”中的这一行：...
js 客户端检测
07-13
在JavaScript的世界里，客户端检测是开发Web应用时不可或缺的一部分，它可以帮助我们了解用户正在使用的设备、浏览器特性，以便实现更好的兼容性和用户体验。这篇博客“js客户端检测”可能深入探讨了如何利用...
vibe-javascript-client:Vibe JavaScript 客户端
06-18
这个压缩包文件名“vibe-javascript-client-master”表明它包含了Vibe JavaScript客户端的源码仓库的主分支。通常，这样的文件会包含README文件，说明如何安装、配置和使用这个库；源代码文件（可能包括.js文件），...
js 高程学习总结 第九章
xueyangshipin的博客
02-16 334
客户端检测能力检测基本模式如下if(object.propertyInQuestion){ //使用object.propertyInQuestion }可以一次性检验相关属性 //确定浏览器是否支持 var hasNSPlugins = !!(navigator.plugins && navigator.plugins.length); //确定浏览器是否具有dom1级规定的能力
Client（客户端）测试专题技术
似水流年的博客
02-19 2384
Client（客户端）测试专题技术Client测试的特点Client测试，也称之为客户端测试，它测试安装在用户机器上的应用程序是否可以正常运行，Client测试需要在本机上安装测试包，然后通过运行Client程序，进行输入保存操作，Client程序功能不同，单测试方法基本相同。如何进行client测试 安装测试 首次安装测试 重复安装测试 卸载测试 UI测试 用户界面风格是否满足客户要求，包括
客户端GUI测试技术和自动化测试架构设计简谈
NFTercel的博客空间
06-14 1459
客户端自动化特点 客户端的自动化，通常做过的人都不是很愿意深入讨论。因为除了功能和逻辑之外，不得不面对各种界面变化，各种和环境交互，各种兼容问题以及想不到灰色地带，就算这样，也找不到太多有效的bug。然而即便如此，客户端的自动化必须去做，尤其是GUI的。它的自动化特点是： 复杂成本高不容易发现问题技术要求高架构很难通用   下面，从一些基本的东西开始一点点的讨论客户端GUI测试的一些问
《JavaScript高级程序设计》读书笔记--9-客户端检测
飞翔射手座
12-20 399
能力检测能力检测的基本模式if(object.propertyInQuestion){ //使用object.propertyInQuestion }怪癖检测想要知道浏览器存在什么缺陷，这通常需要运行一小段代码来确定某一特性不能正常工作。用户代理检测通过检测用户代理字符串来确定使用的浏览器。在服务器端通过检测用户代理字符串来确定用户使用的浏览器是一种常用而且广为接受的做法，但是在客户端，用户
JavaScript客户端检测
weixin_34198762的博客
01-05 119
前言：检测Web客户端的手段很多，并且各有利弊，但不到万不得已，不要使用客户端检测，只要能找到更通用的方法，就优先使用更通用的方法。 1 能力检测 能力检测的目标不是识别特定的浏览器，而是识别浏览器的能力，知道浏览器能干什么不能干什么。能力检测的基本模式如下： if(object.propertyInQuestion){ ...
js--客户端检测
王欢的博客
11-22 448
客户端检测–客户端检测的三种方法：能力检测，怪癖检测，用户代理检测。浏览器普遍存在的不一致性问题，用各种客户端检测方法，来突破或者规避种种局限性。但是，只要能找到更通用的方法，就应该采用。不到万不得已，不要使用客户端检测。能力检测–人们广泛接受的客户端检测形式就是能力检测不是识别特定的浏览器，是识别浏览器的能力。1.先检测达成目的最常用的特性，可以保证代码最优 2.测试实际要用到的特性，而不是测试这
《JavaScript高级语言设计》(第三版)学习笔记(5)
学习笔记
04-26 342
客户端能力检测和客户端识别能力检测基本模式if(object.propertyInQuestion){//方法，如果浏览器不支持此方法则为false 调用方法 }function isHaveSortMethod(object){ return typeof object.ort == "function"; } //检测某个对象的特性是否存在 function isHostMeth
客户端检测
abc2346789的博客
05-27 160
1.能力检测 //能力检测的目标不是识别浏览器，而是识别浏览器的能力。它对于想知道某个特性是否会按照适当方式行事（而不仅仅是某个特性存在）非常有用。 //采用这种方式不必顾忌特定的浏览器如何如何，只要确定浏览器支持特定的能力，就可以给出解决方案。能力检测基本模式如下： if(object.propertyInQuestion){ //使用object.propertyInQu...
JavaScript客户端验证函数集锦
"该资源是一份综合性的JavaScript客户端验证函数集合，涵盖了数字验证、时间验证、表单验证、字符验证、浏览器识别等多个方面，旨在帮助开发者实现更完善的前端数据校验。" 在JavaScript中，客户端验证是确保用户...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值