navigator对象属性

navigator 对象是浏览器环境提供的全局对象之一，它包含了用户浏览器和操作系统的相关信息。通过这个对象的属性，可以获取用户代理、语言偏好、地理位置权限状态等数据，常用于设备检测、功能适配或权限请求场景。

navigator.userAgent

userAgent 返回浏览器的用户代理字符串，通常包含浏览器名称、版本和操作系统信息。由于不同浏览器格式差异较大，解析时需谨慎：

console.log(navigator.userAgent);
// 输出示例（Chrome）: 
// "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36"

典型应用场景：

• 识别爬虫请求（如百度蜘蛛的UA包含Baiduspider）
• 旧版浏览器降级处理（检测IE版本）
• 移动端/PC端路由跳转

注意：现代浏览器已支持通过navigator.userAgentData获取结构化UA数据：

navigator.userAgentData.getHighEntropyValues(['platformVersion'])
  .then(ua => console.log(ua.brands));

navigator.platform

返回运行浏览器的操作系统平台，如Win32、MacIntel：

if (navigator.platform.includes('Mac')) {
  document.body.classList.add('mac-os');
}

局限性：无法区分iOS与iPadOS，且部分浏览器可能返回空字符串。

navigator.language 与 navigator.languages

• language 返回浏览器首选语言（如zh-CN）
• languages 返回用户偏好语言数组，按优先级排序

// 根据语言加载对应资源
const langMap = {
  'zh': '/locales/zh.json',
  'en': '/locales/en.json'
};
const targetLang = navigator.languages.find(lang => langMap[lang]) || 'en';
loadResource(langMap[targetLang]);

navigator.onLine

检测网络连接状态，返回布尔值：

window.addEventListener('online', () => {
  console.log('网络已恢复');
});
console.log('当前状态:', navigator.onLine ? '在线' : '离线');

注意：该属性仅检测浏览器是否认为在线，实际网络可能不可用。

navigator.geolocation

提供访问设备地理位置API，需用户授权：

navigator.geolocation.getCurrentPosition(
  pos => {
    console.log('纬度:', pos.coords.latitude);
    console.log('经度:', pos.coords.longitude);
  },
  err => {
    console.error('获取失败:', err.message);
  },
  { timeout: 5000 }
);

权限策略：HTTPS环境下或localhost才可用，部分浏览器会强制弹出授权对话框。

navigator.mediaDevices

访问摄像头、麦克风等多媒体设备：

// 获取摄像头视频流
navigator.mediaDevices.getUserMedia({ video: true })
  .then(stream => {
    videoElement.srcObject = stream;
  })
  .catch(err => {
    console.error('设备访问被拒绝:', err);
  });

特性检测建议：使用前应先检查API是否存在：

if ('mediaDevices' in navigator && 'getUserMedia' in navigator.mediaDevices) {
  // 安全调用
}

navigator.clipboard

提供系统剪贴板读写能力：

// 写入文本
navigator.clipboard.writeText('复制内容').then(() => {
  console.log('复制成功');
});

// 读取文本
navigator.clipboard.readText().then(text => {
  console.log('剪贴板内容:', text);
});

安全限制：部分浏览器要求触发用户手势（如点击事件）才能调用。

navigator.storage

管理本地存储配额和使用情况：

navigator.storage.estimate().then(estimate => {
  console.log(`已用空间: ${estimate.usage} bytes`);
  console.log(`总配额: ${estimate.quota} bytes`);
});

navigator.deviceMemory

返回设备内存大小（GB），适用于性能优化：

if (navigator.deviceMemory < 2) {
  loadLightweightAssets();
}

兼容性：需在HTTPS环境下生效，部分移动浏览器可能不暴露真实内存。

navigator.hardwareConcurrency

返回CPU逻辑核心数，用于Web Worker分配：

const workerCount = Math.min(navigator.hardwareConcurrency || 4, 8);
for (let i = 0; i < workerCount; i++) {
  new Worker('/js/task.js');
}

navigator.permissions

查询API权限状态（需浏览器支持）：

navigator.permissions.query({ name: 'geolocation' })
  .then(status => {
    console.log('地理位置权限:', status.state);
    status.onchange = () => console.log('权限变更:', status.state);
  });

navigator.connection

获取网络连接信息：

const conn = navigator.connection || navigator.mozConnection;
if (conn) {
  console.log('网络类型:', conn.type);
  console.log('下行速度:', conn.downlink + 'Mb/s');
  conn.addEventListener('change', () => location.reload());
}

可用属性：

• type：wifi/cellular/ethernet
• effectiveType：4g/3g/2g
• rtt：估算往返时间

navigator.vendor

返回浏览器供应商信息，如Google Inc.或Apple Computer, Inc.：

// 检测Safari浏览器
const isSafari = /apple/i.test(navigator.vendor) && 
                 !/chrome/i.test(navigator.userAgent);

navigator.doNotTrack

用户是否启用"不跟踪"偏好：

if (navigator.doNotTrack === '1') {
  disableTrackingScripts();
}

注意：该设置依赖浏览器实现，用户可能手动关闭跟踪保护。

navigator.webdriver

检测当前环境是否被自动化工具控制：

if (navigator.webdriver) {
  console.log('当前处于自动化测试环境');
}

navigator.getBattery()

获取设备电池状态（需异步调用）：

navigator.getBattery().then(battery => {
  console.log(`电量: ${battery.level * 100}%`);
  battery.addEventListener('levelchange', updateBatteryUI);
});

navigator.canShare()

检测当前环境是否支持Web Share API：

if (navigator.canShare?.({ files: [file] })) {
  shareButton.hidden = false;
}

navigator.wakeLock

防止屏幕自动关闭（适用于长时间任务）：

let wakeLock;
async function keepAwake() {
  try {
    wakeLock = await navigator.wakeLock.request('screen');
    wakeLock.addEventListener('release', () => console.log('屏幕锁定已释放'));
  } catch (err) {
    console.error('唤醒锁定失败:', err);
  }
}

navigator.credentials

管理Web认证API（如公钥认证）：

navigator.credentials.create({
  publicKey: {
    challenge: new Uint8Array(32),
    rp: { name: "Example Site" },
    user: {
      id: new Uint8Array(16),
      name: "user@example.com",
      displayName: "User"
    },
    pubKeyCredParams: [{ type: "public-key", alg: -7 }]
  }
}).then(credential => {
  console.log('新凭证:', credential);
});