一 识别浏览器与操作系统
这些属性的值的初始化取决于浏览器和设备状态
属性 | 作用 | 类型 | 参数 | 例子 | 特殊 |
navigator.oscpu | 通常对应用户代理字符串中操作系统/系统架构相关信息 | 字符串 | / | 例子1 | |
navigator.vendor | 通常包含浏览器开发商信息 | 字符串 | / | 例子2 | |
navigator.platform | 通常表示浏览器所在的操作系统 | 字符串 | / | 例子3 | |
screen.colorDepth && screen.pixelDepth | 返回一样的值,即显示器每像素颜色的位深 | / | / | 例子4 | 根据CSS对象模型(CSSOM)规范 |
screen.orientation | 返回一个ScreenOrientation对象,其中包含Screen Orientation API定义的屏幕信息(属性:angle、type) |
/ | / |
例子5 |
例子5:
angle:返回相对于默认状态下屏幕的角度
type:返回4种枚举值之一
- portrait-primary
- portrait-secondary
- landscape-primary
- landscape-secondary
例子1:
例子2:
例子3:
例子4:
二 浏览器元数据
作用:可以提供浏览器和操作系统的状态信息
API 1 : Geolocation API
调用对象:navigator.geolocation
作用:可以让浏览器脚本感知当前设备的地理位置(只在安全执行环境,通过HTTPS获取的脚本)中可用
地理位置信息的主要来源是GPS和IP地址、射频识别(RFID)、WiFi及蓝牙Mac地址、GSM/CDMA蜂窝ID以及用户输入等信息
方法:
- getCurrentPosition()
- 作用:要获取浏览器当前的位置
(成功回调是第一个参数,失败回调是第二个参数,PositionOptions对象是第三个参数) - 获取成功的返回值:一个包含坐标信息的Coordinates对象(coords))+ 一个表示查询时间的时间戳(timestamp)
- Coordinates对象:
- 标准格式的经度和纬度: latitude longitude
- 以米为单位的精度:accuracy
- 海拔高度:altitude
- 精度值:altitudeAccuracy
- 设备每秒移动的速度:speed
- 朝向:heading
- Coordinates对象:
- 作用:要获取浏览器当前的位置
// getCurrentPosition()会以position 对象为参数调用传入的回调函数
navigator.geolocation.getCurrentPosition((position) => p = position);
console.log(p.timestamp); // 1525364883361
console.log(p.coords); // Coordinates {...}
console.log(p.coords.latitude, p.coords.longitude); // 37.4854409, -122.2325506
console.log(p.coords.accuracy); // 58
console.log(p.coords.altitude); // -8.800000190734863
console.log(p.coords.altitudeAccuracy); // 200
- 获取失败的返回值:
- PositionError对象:
- 属性:
- code:
-
错误 定义 PERMISSION_DENIED 浏览器未被运行访问设备位置 POSITION_UNAVAILABLE 系统无法返回任何位置信息 TIMEOUT 系统不能在超时时间内返回位置信息 - message:
- 属性:
- PositionError对象:
// 浏览器会弹出确认对话框请用户允许访问Geolocation API
// 这个例子显示了用户拒绝之后的结果
navigator.geolocation.getCurrentPosition(
() => {},
(e) => {
console.log(e.code); // 1
console.log(e.message); // User denied Geolocation
}
);
// 这个例子展示了在不安全的上下文中执行代码的结果
navigator.geolocation.getCurrentPosition(
() => {},
(e) => {
console.log(e.code); // 1
console.log(e.message); // Only secure origins are allowed
}
);
- PositionOptions对象:
-
属性 定义 值 enableHighAccuracy 设备返回精确的坐标 布尔值,
true表示返回的值应该尽量精确,
默认值为false
timeout 表示在以timeout状态调用错误回调函数之前等待的最长时间 毫秒 maximumAge 表示返回坐标的最长有效期 毫秒
-
API 2: Connection State && NetworkInfomation API
API 3: Battery Status API
浏览器可以访问设备电池及充电状态的信息
navigator.getBattery()方法会返回一个期约实例,解决为一个BatteryManager对象
navigator.getBattery().then((b) => console.log(b));
// BatteryManager { ... }
只读属性:(提供了设备电池的相关信息)
属性 | 定义 | 类型 | 返回值 |
charging | 表示设备当前是否正接入电源充电 | boolean | 有电池,返回true |
chargingTime | 表示预计离电量充满还有多少秒 | int | 如果电池已充满或设备没有电池,返回0 |
dischargingTime | 表示预计离电量耗尽还有多少秒 | int | 如果设备没有电池,返回Infinity |
level | 表示电量百分比 | float | 电量完全耗尽返回0.0 电池充满返回1.0 如果设备没有电池,则返回1.0 |
事件属性:(可用于设置在相应的电池事件发生时调用的回调函数)
- onchargingchange
- onchargingtimechange
- ondischargingtimechange
- onlevelchange
navigator.getBattery().then((battery) => {
// 添加充电状态变化时的处理程序
const chargingChangeHandler = () => console.log('chargingchange');
battery.onchargingchange = chargingChangeHandler;
// 或
battery.addEventListener('chargingchange', chargingChangeHandler);
// 添加充电时间变化时的处理程序
const chargingTimeChangeHandler = () => console.log('chargingtimechange');
battery.onchargingtimechange = chargingTimeChangeHandler;
// 或
battery.addEventListener('chargingtimechange', chargingTimeChangeHandler);
// 添加放电时间变化时的处理程序
const dischargingTimeChangeHandler = () => console.log('dischargingtimechange');
battery.ondischargingtimechange = dischargingTimeChangeHandler;
// 或
battery.addEventListener('dischargingtimechange', dischargingTimeChangeHandler);
// 添加电量百分比变化时的处理程序
const levelChangeHandler = () => console.log('levelchange');
battery.onlevelchange = levelChangeHandler;
// 或
battery.addEventListener('levelchange', levelChangeHandler);
})
三 硬件
- 处理器核心数
navigator.hardwareConcurrency属性返回浏览器支持的逻辑处理器核心数量,包含表示核心数的一个整数值
- 设备内存大小
navigator.deviceMemory属性返回设备大致的系统内存大小,包含单位为GB的浮点数
- 最大触点数
navigator.maxTouchPoints属性返回触摸屏支持的最大关联触点数量,包含一个整数值