资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/高程3总结#第9章客户端检测

高程3总结#第9章客户端检测

BigNerdCoding / 632人阅读

摘要：能力检测无法精确地检测特定的浏览器和版本。用户代理检测通过检测用户代理字符串来识别浏览器。用户代理检测需要特殊的技巧，特别是要注意会隐瞒其用户代理字符串的情况。

客户端检测 能力检测

能力检测的目的不是识别特定的浏览器，而是识别浏览器的能力，采用这种方式不必顾忌特定的浏览器，只要确定浏览器支持的特定的能力，就能给出解决方案，检测基本模式

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

比如，IE5之前的版本不支持document.getElementById()这个方法

function getElement(id){
  if(document.getElementById){
    return document.getElementById(id);
  }else if(document.all){
    return document.all(id);
  }else {
    throw new Error("No way to retrieve element!")
  }
}

检测某个属性是否存在，并不能确定是否支持这个函数，更好的方式是检测这个函数是不是一个函数

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

在IE中，检测document.createElement()是否存在会返回false，可以使用isHostMethod方法

function isHostMethod(object,property){
  var t=typeof object(property);
  return t=="function"||(!!(t=="object"&&object[property]))||t=="unknow"
}

//使用
result=isHostMethod(xhr,"open");//true
result=isHostMethod(xhr,"foo");//false

怪癖检测

怪癖检测是想要知道浏览器存在什么缺陷，也就是bug

var hasDontEnumQuick=function(){
  var o={toString:function(){}};
  for(var prop in o){
    if(prop=="toString"){
      return false;
    }
  }
  return true;
}();

用户代理检测

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

用户代理字符串发展历史

产品标识符常用于通信应用程序标识自身，由软件名和版本组成，使用产品标识符的大多数领域也允许列出作为应用程序主要部分的子产品，由空格分隔。按照惯例，产品要按照相应的重要程度依次列出，以便标识应用程序。

早期浏览器

Mozilla/版本号 [语言] (平台；加密类型)=>Mozilla/2.20 [fr] (WinNT;I)

Netscape navigator 3和Internet Explorer 3

Mozilla/版本号 (平台; 加密类型 [; 操作系统或 CPU 说明])=>Mozilla/3.0 (Win95; U)

Mozilla/2.0 (compatible; MSIE 版本号; 操作系统)=>Mozilla/2.0 (compatible; MSIE 3.02; Windows 95)

Netscape Communicator 4和IE4~IE8

Mozilla/版本号 (平台; 加密类型 [; 操作系统或 CPU 说明])=>Mozilla/4.0 (Win98; I)

Mozilla/4.0 (compatible; MSIE 版本号; 操作系统)=>Mozilla/4.0 (compatible; MSIE 4.0; Windows 98)

Mozilla/4.0 (compatible; MSIE 版本号; 操作系统; Trident/Trident 版本号)=>Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0)

Gecko

Mozilla/Mozilla 版本号 (平台; 加密类型; 操作系统或 CPU; 语言; 预先发行版本)Gecko/Gecko 版本号 应用程序或产品/应用程序或产品版本号

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:0.9.4) Gecko/20011128 Netscape6/6.2.1

Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8.1b2) Gecko/20060823 SeaMonkey/1.1a

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.11) Gecko/20071127 Firefox/2.0.0.11

Mozilla/5.0 (Macintosh; U; Intel Mac OS X; en; rv:1.8.1.6) Gecko/20070809 Camino/1.5.1

WebKit

Mozilla/5.0 (平台; 加密类型; 操作系统或 CPU; 语言) AppleWebKit/AppleWebKit 版本号(KHTML, like Gecko) Safari/Safari 版本号=>Mozilla/5.0 (Macintosh; U; PPC Mac OS X; en) AppleWebKit/124 (KHTML, like Gecko)Safari/125.1

Konqueror

Mozilla/5.0 (compatible; Konqueror/ 版本号; 操作系统或 CPU) KHTML/ KHTML 版本号 (like Gecko)=>Mozilla/5.0 (compatible; Konqueror/3.5; SunOS) KHTML/3.5.0 (like Gecko)

Chrome

Mozilla/5.0 ( 平台; 加密类型; 操作系统或 CPU; 语言) AppleWebKit/AppleWebKit 版本号 (KHTML,like Gecko) Chrome/ Chrome 版本号 Safari/ Safari 版本=>Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/534.7 (KHTML,
like Gecko) Chrome/7.0.517.44 Safari/534.7

Opera

Opera/ 版本号 (操作系统或 CPU; 加密类型) [语言]=>Opera/7.54 (Windows NT 5.1; U) [en]

Opera/ 版本号 (操作系统或 CPU; 加密类型; 语言)=>Opera/8.0 (Windows NT 5.1; U; en)

Opera/9.80 (操作系统或 CPU; 加密类型; 语言) Presto/Presto 版本号 Version/版本号=>Opera/9.80 (Windows NT 6.1; U; en) Presto/2.6.30 Version/10.63

IOS和Android

Mozilla/5.0 (平台; 加密类型; 操作系统或 CPU like Mac OS X; 语言)AppleWebKit/AppleWebKit 版本号 (KHTML, like Gecko) Version/浏览器版本号 Mobile/移动版本号 Safari/Safari 版本号=>Mozilla/5.0 (iPhone; U; CPU iPhone OS 3_0 like Mac OS X; en-us)AppleWebKit/528.18 (KHTML, like Gecko) Version/4.0 Mobile/7A341 Safari/528.16

完整代码 
var client = function(){
//呈现引擎
var engine = {
  ie: 0,
  gecko: 0,
  webkit: 0,
  khtml: 0,
  opera: 0,
  //完整的版本号
  ver: null
};
//浏览器
var browser = {
  //主要浏览器
  ie: 0,
  firefox: 0,
  safari: 0,
  konq: 0,
  opera: 0
  chrome: 0,
  //具体的版本号
  ver: null
};
//平台、设备和操作系统
var system = {
  win: false,
  mac: false,
  x11: false,
  //移动设备
  iphone: false,
  ipod: false,
  ipad: false,
  ios: false,
  android: false,
  nokiaN: false,
  winMobile: false,
  //游戏系统
  wii: false,
  ps: false
};
//检测呈现引擎和浏览器
var ua = navigator.userAgent;
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);
  //确定是 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"];
    browser.safari = 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) || /Konqueror/([^;]+)/.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";
          break;
        case "5.1":
          system.win = "XP";
          break;
        case "6.0":
          system.win = "Vista";
          break;
        case "6.1":
          system.win = "7";
          break;
        default:
          system.win = "NT";
          break;
      }
    } else if (RegExp["$1"] == "9x"){
      system.win = "ME";
    } else {
      system.win = RegExp["$1"];
    }
  }
}
//移动设备
system.iphone = ua.indexOf("iPhone") > -1;
system.ipod = ua.indexOf("iPod") > -1;
system.ipad = ua.indexOf("iPad") > -1;
system.nokiaN = ua.indexOf("NokiaN") > -1;
//windows mobile
if (system.win == "CE"){
  system.winMobile = system.win;
} else if (system.win == "Ph"){
  if(/Windows Phone OS (d+.d+)/.test(ua)){;
                                            system.win = "Phone";
                                            system.winMobile = parseFloat(RegExp["$1"]);
                                           }
}
//检测 iOS 版本
if (system.mac && ua.indexOf("Mobile") > -1){
  if (/CPU (?:iPhone )?OS (d+_d+)/.test(ua)){
    system.ios = parseFloat(RegExp.$1.replace("_", "."));
  } else {
    system.ios = 2; //不能真正检测出来，所以只能猜测
  }
}
//检测 Android 版本
if (/Android (d+.d+)/.test(ua)){
  system.android = parseFloat(RegExp.$1);
}
//游戏系统
system.wii = ua.indexOf("Wii") > -1;
system.ps = /playstation/i.test(ua);
//返回这些对象
return {
  engine: engine,
  browser: browser,
  system: system
};
}()
总结

能力检测

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

怪癖检测

怪癖实际上是浏览器实现中存在的 bug，例如早期的 WebKit 中就存在一个怪癖，即它会在 for-in 循环中返回被隐藏的属性。怪癖检测通常涉及到运行一小段代码，然后确定浏览器是否存在某个怪癖。由于怪癖检测与能力检测相比效率更低，因此应该只在某个怪癖会干扰脚本运行的情况下使用。怪癖检测无法精确地检测特定的浏览器和版本。

用户代理检测

通过检测用户代理字符串来识别浏览器。用户代理字符串中包含大量与浏览器有关的信息，包括浏览器、平台、操作系统及浏览器版本。用户代理字符串有过一段相当长的发展历史，在此期间，浏览器提供商试图通过在用户代理字符串中添加一些欺骗性信息，欺骗网站相信自己的浏览器是另外一种浏览器。用户代理检测需要特殊的技巧，特别是要注意 Opera会隐瞒其用户代理字符串的情况。即便如此，通过用户代理字符串仍然能够检测出浏览器所用的呈现引擎以及所在的平台，包括移动设备和游戏系统。

GPU云服务器 云服务器 明解c语言第9章 javascript基础教程第9版 第3篇 检测客户端类型

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

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

相关文章

  • 高程3总结#第8章BOM

    摘要：对象的核心对象是，它表示浏览器的一个实例。而和则表示该容器中页面视图区的大小。在中，与返回相同的值，即视口大小而非浏览器窗口大小。第三个参数是一个逗号分隔的设置字符串，表示在新窗口中都显示哪些特性。这应该是用户打开窗口后的第一个页面 BOM window对象 BOM的核心对象是window，它表示浏览器的一个实例。在浏览器中，window对象有双重角色，它既是通过JavaScript访...

    MASAILA 评论0 收藏0

  • 高程3总结#第11章DOM扩展

    摘要：操作类名时可以通过属性添加删除和替换类名。如果将可选的参数设置为，则表示尽量将元素显示在视口中部垂直方向。将元素的内容滚动指定的页面高度，具体高度由元素的高度决定。 DOM扩展 选择符API querySelector()方法 querySelector()方法接收一个CSS选择符，返回与该模式匹配的第一个元素，如果没有找到匹配的元素，返回null //取得body元素 var b...

    cucumber 评论0 收藏0

  • 高程3总结#第16章HTML5脚本编程

    摘要：脚本编程跨文档消息传递跨文档消息传送，简称为，指的是来自不同域的页面间传递消息的核心是方法，在规范中，除了部分之外的其他部分也会提到这个方法名，但都是为了同一个目的，向另一个地方传递参数。第一个页面加载时为空 HTML5脚本编程 跨文档消息传递 跨文档消息传送，简称为XMD，指的是来自不同域的页面间传递消息 XMD的核心是postMessage()方法，在HTML5规范中，除了XDM...

    silvertheo 评论0 收藏0

  • 高程3总结#第10章DOM

    摘要：类型对象是的一个实例，表示整个页面，而且，对象是对象的一个属性，因此可以将其作为全局对象来访问。删除指定位置的行。创建创建创建第一行创建第二行将表格添加到文档主体中 DOM 节点层次 Node类型 DOM1级定义了一个Node接口，该接口将由DOM中的所有节点类型实现 节点类型由在Node类型中定义的12个数值常量来表示，任何节点类型必居其一 Node.ELEMENT_NODE(...

    ARGUS 评论0 收藏0

  • 高程3总结#第15章使用Canvas绘图

    摘要：使用绘图基本用法要使用元素，必须先设置其和属性，指定可以绘图的区域大小。，将绘图游标移动到，不画线。，表示文本对齐方式。执行这个变换之后，坐标会变成之前由表示的点。，后绘制的图形完全替代与之重叠的先绘制图形。也实现了，但默认是禁用的。 使用Canvas绘图 基本用法 要使用元素，必须先设置其width和height属性，指定可以绘图的区域大小。出现在开始和结束标签中的内容是后备信息...

    shusen 评论0 收藏0

发表评论

登陆后可评论

0条评论

BigNerdCoding

男|高级讲师
我要私信

TA的文章

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