navigator对象属性

navigator对象是浏览器环境提供的全局对象之一，用于获取当前浏览器的相关信息。它包含大量属性和方法，能够帮助开发者检测浏览器类型、版本、操作系统等，甚至实现一些特定功能如地理位置获取或剪贴板操作。

navigator.userAgent

userAgent属性返回一个字符串，表示浏览器的用户代理头信息。通过解析这个字符串，可以判断浏览器类型、版本及操作系统。

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

实际应用中，可通过正则匹配实现浏览器检测：

const isChrome = /Chrome/i.test(navigator.userAgent) && !/Edge/i.test(navigator.userAgent);
console.log(`当前${isChrome ? '是' : '不是'}Chrome浏览器`);

navigator.platform

该属性返回运行浏览器的操作系统平台，例如Win32、MacIntel或Linux x86_64。

console.log(navigator.platform); // 输出示例: "Win32"

注意：现代浏览器可能返回空字符串或模糊值以增强隐私保护。

navigator.language

返回浏览器界面的首选语言设置，格式为BCP 47语言标签。例如zh-CN表示简体中文。

console.log(navigator.language); // 输出示例: "zh-CN"

多语言网站常用此属性实现自动语言切换：

if (navigator.language.startsWith('zh')) {
  document.documentElement.lang = 'zh';
}

navigator.cookieEnabled

布尔值属性，表示浏览器是否启用了cookie功能。

if (!navigator.cookieEnabled) {
  alert('请启用cookie以保证网站功能正常');
}

navigator.onLine

返回布尔值，表示浏览器是否处于联网状态。注意：即使返回true也不代表一定能访问特定服务器。

window.addEventListener('online', () => {
  console.log('网络已恢复');
});
window.addEventListener('offline', () => {
  console.log('网络已断开');
});

navigator.geolocation

提供访问设备地理位置信息的接口，需要用户授权。

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

navigator.clipboard

现代剪贴板API，支持读写剪贴板内容。必须在安全上下文(HTTPS)中且用户主动交互后调用。

// 写入文本
document.getElementById('copyBtn').addEventListener('click', async () => {
  try {
    await navigator.clipboard.writeText('要复制的文本');
    console.log('复制成功');
  } catch (err) {
    console.error('复制失败:', err);
  }
});

// 读取文本
document.getElementById('pasteBtn').addEventListener('click', async () => {
  try {
    const text = await navigator.clipboard.readText();
    console.log('粘贴内容:', text);
  } catch (err) {
    console.error('读取剪贴板失败:', err);
  }
});

navigator.mediaDevices

提供访问媒体设备(如摄像头、麦克风)的接口，返回Promise对象。

// 获取用户媒体设备
navigator.mediaDevices.getUserMedia({ video: true, audio: false })
  .then(stream => {
    document.getElementById('video').srcObject = stream;
  })
  .catch(err => {
    console.error('无法访问媒体设备:', err);
  });

navigator.hardwareConcurrency

返回浏览器所在设备的逻辑处理器核心数，可用于优化Web Worker数量。

const workerCount = Math.min(navigator.hardwareConcurrency || 4, 8);
console.log(`建议创建${workerCount}个Web Worker`);

navigator.storage

提供存储管理API，可查询可用存储空间等信息。

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

navigator.deviceMemory

返回设备内存大小(GB)，可能被四舍五入或出于隐私考虑返回较低值。

if (navigator.deviceMemory < 2) {
  console.log('低内存设备，启用简化模式');
}

navigator.vendor

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

console.log(navigator.vendor); // Chrome输出: "Google Inc."

navigator.doNotTrack

返回用户是否启用了"不跟踪"(DNT)偏好设置。可能返回1(启用)、0(禁用)或null(未设置)。

if (navigator.doNotTrack === '1') {
  console.log('用户启用了不跟踪设置');
}

navigator.connection

提供网络连接信息，包括类型、速度等。

const connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
if (connection) {
  console.log('连接类型:', connection.type);
  console.log('有效类型:', connection.effectiveType);
  console.log('下行速度(Mbps):', connection.downlink);
  console.log('往返时间(ms):', connection.rtt);
}

navigator.permissions

权限查询API，可检查各种权限状态。

navigator.permissions.query({ name: 'geolocation' }).then(result => {
  console.log(`地理位置权限状态: ${result.state}`);
});

navigator.getBattery()

返回Promise，解析为电池状态信息。

navigator.getBattery().then(battery => {
  console.log(`电量: ${battery.level * 100}%`);
  console.log(`充电状态: ${battery.charging ? '充电中' : '未充电'}`);
});

navigator.plugins

返回已安装插件数组，现代浏览器可能限制此属性。

Array.from(navigator.plugins).forEach(plugin => {
  console.log(`插件名称: ${plugin.name}, 版本: ${plugin.version}`);
});

navigator.mimeTypes

返回浏览器支持的MIME类型数组。

Array.from(navigator.mimeTypes).forEach(mimeType => {
  console.log(`MIME类型: ${mimeType.type}, 描述: ${mimeType.description}`);
});

navigator.javaEnabled()

返回布尔值，表示浏览器是否启用了Java。

console.log(`Java ${navigator.javaEnabled() ? '已启用' : '未启用'}`);

navigator.sendBeacon()

异步发送小量数据到服务器，适合页面卸载时发送日志。

window.addEventListener('unload', () => {
  const data = new Blob([JSON.stringify({ event: 'page_close' })], { type: 'application/json' });
  navigator.sendBeacon('/log', data);
});