Navigator

Navigator 对象用于暴露当前浏览器环境的一部分能力和偏好信息，例如语言、联网状态、用户代理、剪切板能力等。

navigator 是什么

在浏览器里可以通过 window.navigator 或 navigator 访问它：

window.navigator
navigator

它不是“用户身份信息”，而是“当前运行环境信息”的一个入口。

常用属性

userAgent

console.log(navigator.userAgent)

表示浏览器提供的 UA 字符串。它曾经常被用来做浏览器识别，但现代开发里不建议过度依赖它。

language 和 languages

console.log(navigator.language)
console.log(navigator.languages)

• language：首选语言
• languages：语言偏好列表

这在国际化场景中很常见。

cookieEnabled

console.log(navigator.cookieEnabled)

表示浏览器当前是否启用了 Cookie。

onLine

console.log(navigator.onLine)

表示浏览器当前报告的联网状态，但它只能作为粗略参考，不能等价理解为“接口一定可用”。

常见能力入口

很多现代 Web API 都挂在 navigator 上，例如：

navigator.clipboard
navigator.serviceWorker
navigator.mediaDevices

这也是 navigator 的一个重要特点：它既暴露信息，也暴露宿主能力。

常见使用场景

读取浏览器语言

const locale = navigator.language

常用于初始化国际化语言、日期格式或地区设置。

感知网络状态变化

window.addEventListener('online', () => {
  console.log('online')
})

window.addEventListener('offline', () => {
  console.log('offline')
})

这类事件适合做基础提示，但不能代替真实请求探测。

访问剪切板

await navigator.clipboard.writeText('hello')
const text = await navigator.clipboard.readText()

剪切板、媒体设备、Service Worker 等能力往往都需要安全上下文或用户授权。

不推荐做的事

不要把 userAgent 当成首选判断方式

例如不要优先写成：

if (navigator.userAgent.includes('Chrome')) {
  // ...
}

更稳妥的方式通常是：

• 优先做能力检测
• 只在兼容处理确实需要时再读 UA

if ('clipboard' in navigator) {
  // 支持 Clipboard API
}

使用建议

• 读取语言、在线状态这类环境信息时，可以直接使用 navigator。
• 判断功能是否可用时，优先做能力检测，不要先做浏览器品牌判断。
• navigator.onLine 只能作为弱信号，真正业务可用性仍以实际请求结果为准。
• 涉及权限 API 时，要同时关注 HTTPS、安全上下文和用户手势要求。

参考资料

• MDN Navigator