JavaScript客户端检测

能力检查

能力检查(又称为特性功能检查)通过javascript编写一套简单的检测逻辑,测试浏览器是否支持某种特性.

基本模式

function fun(a){
if(document.getElementById){
    return document.getElementById(a)
}else{
    console.log('未定义该方法')
}
}

或者使用typeOf操作符

function fun(a){
if(typeOf document.getElementById ==='function'){
    console.log('该方法存在')
}else{
    console.log('该方法不存在')
}
}

或者使用!!(对象)的方式对方法进行检测,(任何对象进行布尔值操作会转化为布尔值true,null会转化为false)

function fun(a){
if(!!document.getElementById){
    console.log('该方法存在')
}else{
    console.log('该方法不存在')
}
}

基于能力检测进行浏览器分析

检测浏览器：可以根据对浏览器特性的检测并与已知特性对比，确认用户使用的是什么浏览器

// 这个类暴露的通用浏览器检测方法使用了检测浏览器范围的能力测试
class BrowserDetector { 
    constructor() { 
        // 测试条件编译
        // IE6~10 支持
        this.isIE_Gte6Lte10 = /*@cc_on!@*/false; 
        // 测试 documentMode 
        // IE7~11 支持
        this.isIE_Gte7Lte11 = !!document.documentMode;
        // 测试 StyleMedia 构造函数
        // Edge 20 及以上版本支持
        this.isEdge_Gte20 = !!window.StyleMedia; 
        // 测试 Firefox 专有扩展安装 API 
        // 所有版本的 Firefox 都支持
        this.isFirefox_Gte1 = typeof InstallTrigger !== 'undefined'; 
        // 测试 chrome 对象及其 webstore 属性
        // Opera 的某些版本有 window.chrome，但没有 window.chrome.webstore 
        // 所有版本的 Chrome 都支持
        this.isChrome_Gte1 = !!window.chrome && !!window.chrome.webstore; 
        // Safari 早期版本会给构造函数的标签符追加"Constructor"字样，如：
        // window.Element.toString(); // [object ElementConstructor] 
        // Safari 3~9.1 支持
        this.isSafari_Gte3Lte9_1 = /constructor/i.test(window.Element); 
        // 推送通知 API 暴露在 window 对象上
        // 使用默认参数值以避免对 undefined 调用 toString() 
        // Safari 7.1 及以上版本支持
        this.isSafari_Gte7_1 = 
        (({pushNotification = {}} = {}) => 
        pushNotification.toString() == '[object SafariRemoteNotification]' 
        )(window.safari); 
        // 测试 addons 属性
        // Opera 20 及以上版本支持
        this.isOpera_Gte20 = !!window.opr && !!window.opr.addons; 
    } 
    isIE() { return this.isIE_Gte6Lte10 || this.isIE_Gte7Lte11; } 
    isEdge() { return this.isEdge_Gte20 && !this.isIE(); } 
    isFirefox() { return this.isFirefox_Gte1; } 
    isChrome() { return this.isChrome_Gte1; } 
    isSafari() { return this.isSafari_Gte3Lte9_1 || this.isSafari_Gte7_1; } 
    isOpera() { return this.isOpera_Gte20; } 
} 

用户代理检测

用户代理检测通过浏览器的用户的代理字符串确定浏览器类型代理字符串包含在每个HTTP请求的头部.

通过navigator.userAgent访问.

伪造用户代理

navigator.userAgent是只读的,对其进行修改,并不会改变其值.

但可以通过简单的方法绕过这个限制.利用浏览器私有的_defineGetter_方法.

浏览器类型检测，运行平台检测等

请查看下面的详细介绍

(23条消息) JavaScript 用户代理检测（浏览器类型检测，运行平台检测等） 规范代码_Volavion的博客-CSDN博客

软件与硬件检测

浏览器,操作系统,硬件和周边设备信息可以通过navigator,screen对象上的API获得.但这些API远远未到标准化的程度,建议使用前对其继续能力检测.

识别浏览器与操作系统

navigator,screen对象提供了页面所在软件环境的信息.

1. navigator.oscpu(edge不可用)

返回对应用户代理字符串中的操作系统/系统架构相关信息.

2. navigator.vendor

包含浏览器开发商的信息

3. screen.colorDepth/screen.pixelDepth

显示器每像素颜色的位深

4. navigator.platform

浏览器所在的操作系统

5. screen.orientation

返回一个ScreenOrientation对象,包含ScreenOrientationAPI定义的屏幕信息.

ScreenOrientation对象属性

angle屏幕的角度

type 当前状态,返回4个枚举值之一:

portrait-primary竖直(angle=0)

portrait-secondary倒立(angle=180)

landscape-primary向左(angle=90)

landscape-secondary向右(angle=270)

通过这两个值,确定设备旋转后浏览器的朝向变化.

浏览器元数据

1. GeolocationAPI

navigator.geolocation属性暴露了GeolocationAPI,可以让浏览器脚本感知当前设备的地理位置.

这个API只能在安全执行环境(通过HTTPS获取的脚本)中可用.

navigator.geoloaction.getCurrentPosition()方法,返回一个Coordinates对象.需要以position对象为参数,调用传入的回调函数,获得对象.

参数1为回调函数,返回一个Coordinates对象,该对象有两个属性,coords标准格式的经度和纬度,timestamp时间戳

参数2为失败回调函数,返回一个PositionError对象,其包含code属性和message属性.

code属性是一个整数,表示3种错误.

1. PERMISSION_DENIED:浏览器未被允许访问设备位置或在不安全环境下访问.----1

2. lSITION_UNAVAILABLE:浏览器无法返回任何位置信息.----2

3. TIMEOUT:系统不能在超时时间内返回位置信息.----3

message属性为对错误的简短描述.

参数3为PositionOptions对象,该对象有3个属性

1. enableHIghAccuracy:布尔值,true表示返回的值应该尽量标准.默认为false.

2. timeout:表示在TIMEOUT状态调用错误回调函数之前等待的最长时间.默认为2^32-1.

3. MaximumAge:返回坐标的最长有效期,默认为0.

2. Connection State和NetworkInformationAPI

浏览器会跟踪网路连接情况的状态并以两种方式暴露这些信息,连接事件和navigator.online属性.

连接事件:连接入网络时,会触发online事件,断开连接时,会触发window的offline事件.

navigator.online会返回联网信息,true\false

联网取决于浏览器与系统的实现,有些浏览器认为只要是连接到局域网就是联网,而不管是否接入互联网.

navigator对象还暴露了NetworkInformationAPI,可以通过navigator.connection属性使用.

属性

downlink:整数,表示当前设备的宽带

downlinkMax:整数,表示当前设备最大的下行宽带

effectiveType:连接速度和质量

rtt:毫秒,网络实际往返时间

type:表示网络连接技术

saveData:布尔值,是否启用节流

onchange:事件处理程序

3. Battery StatusAPI

浏览器可以访问设备电池及其充电状态的信息.

navigator.getBattery()返回一个期约实例,解决为一个BatteryManager对象.

navigator.getBattery().then((a)=>{console.log(a)});

BatteryManager对象属性:

charging:布尔值,表示当前是否正在接入电源充电.

chargingTIme:整数表示预计还有多久可以充满.

dischargingTime:整数,表示预计离电量耗尽还有多少秒.

level:浮点数,表示电量百分比.0.0~1.0

事件属性:

onchargingchange:表示电源充电状态发生变化时的处理程序.

onchargingTImechange:表示电源充电chargingtTime状态发生变化时的处理程序.

ondischargingTimechange:表示dischargingTime发生变化时的处理程序.

onlevelchange:表示leval发生变化时的处理程序

硬件

1. 处理器核心数

navigator.hardwareConcurrency返回浏览器支持的逻辑处理器核心数量.

2. 设备内存大小

navigator.deviceMemory返回设备大致系统内存大小.

3. 最大触点数

navigator.maxTouchPoints返回触摸屏支持的最大关联触点数量