前端知识点

配色方案

本页目录

navigator ​

主要用于获取浏览器的一些信息，常用的比如 userAgent

常用属性 ​

属性说明
deviceMemory设备内存，单位 GB
onLine设备是否联网，布尔值
platform系统平台，例 win32
onLine设备是否联网
clipboard用于访问系统剪切板的 Clipboard 对象
geolocation只读属性返回一个 Geolocation 对象
userAgent
storage返回浏览器 webStorage 对象

常用方法 ​

属性说明
getBattery()获取设备电池信息，返回 promise
sendBeacon()可发送少量数据到服务器，可用于埋点
vibrate()使设备振动

1. userAgent ​

示例：
Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36 Edg/108.0.1462.54

常用于判断操作系统、浏览器名称、浏览器版本等信息

2. geolocation ​

Navigator.geolocation 只读属性返回一个 Geolocation 对象，利用该对象的方法可以获取到设备的地理定位。

注意：

  • 必须授予打开网页的客户端位置权限；
  • 必须使用https协议

兼容性：主流浏览器都支持

JS
// 获取当前位置
navigator.geolocation.getCurrentPosition(success, error, options);

// 监听位置改变
navigator.geolocation.watchPosition(success, error, options);

// 移除监听
const id = navigator.geolocation.watchPosition(success, error, options);
navigator.geolocation.clearWatch(id);

const options = {
  enableHighAccuracy: true,
  timeout: 5000,
  maximumAge: 0,
};

function success(pos) {
  const crd = pos.coords;

  console.log("Your current position is:");
  console.log(`Latitude : ${crd.latitude}`);
  console.log(`Longitude: ${crd.longitude}`);
  console.log(`More or less ${crd.accuracy} meters.`);
}

function error(err) {
  console.warn(`ERROR(${err.code}): ${err.message}`);
}
// 获取当前位置
navigator.geolocation.getCurrentPosition(success, error, options);

// 监听位置改变
navigator.geolocation.watchPosition(success, error, options);

// 移除监听
const id = navigator.geolocation.watchPosition(success, error, options);
navigator.geolocation.clearWatch(id);

const options = {
  enableHighAccuracy: true,
  timeout: 5000,
  maximumAge: 0,
};

function success(pos) {
  const crd = pos.coords;

  console.log("Your current position is:");
  console.log(`Latitude : ${crd.latitude}`);
  console.log(`Longitude: ${crd.longitude}`);
  console.log(`More or less ${crd.accuracy} meters.`);
}

function error(err) {
  console.warn(`ERROR(${err.code}): ${err.message}`);
}

3. storage ​

4. vibrate() ​

设备振动

JS
navigator.vibrate(ms);  // 振动毫秒数
navigator.vibrate(ms);  // 振动毫秒数