如何检测浏览器特性javascript_现代特征检测怎么做【教程】

现代JavaScript特性检测应直接测试API可用性及行为，而非依赖浏览器版本号；需结合存在性检测（如typeof、in）、行为验证（try/catch+返回值检查）和权限检测（如navigator.permissions），避免仅依赖userAgent或静态判断。

现代 JavaScript 特性检测不是靠查浏览器版本号，而是直接测试目标 API 是否可用、是否按预期行为工作——这是唯一可靠的方式。

用 typeof 和 in 检测全局对象上的属性是否存在

适用于静态可枚举的 API，比如 Promise、fetch、URLSearchParams 等。

• typeof Promise !== 'undefined' 比 Promise !== undefined 更安全，避免 ReferenceError
• 'fetch' in window 可以检测是否挂载在全局（比 typeof fetch !== 'undefined' 更明确作用域）
• 注意：某些 API 存在但不可用（如 Safari 15.4 之前的 AbortController 存在但 signal 不被 fetch 支持），仅存在性检测不够

用 try/catch + 实际调用验证行为是否符合预期

存在性不等于可用性。比如 Intl.Locale 在部分旧版 Chrom

e 中存在但构造会抛错；Array.prototype.at 在早期 Safari 中存在但返回 undefined 而非正确值。

• 写一个最小可行调用，捕获异常或检查返回值类型/行为
• 示例：检测 at() 是否真正可用

function supportsArrayAt() {
  try {
    return [1,2,3].at(0) === 1;
  } catch {
    return false;
  }
}

• 避免只测「不报错」，要测「返回值合理」——有些 polyfill 会静默失败或返回错误类型

用 Feature Policy 或 Permissions API 检测运行时权限类能力

像摄像头、地理位置、通知等不是语言特性，而是受策略和用户授权双重限制的运行时能力。

• navigator.permissions?.query({ name: 'geolocation' }) 返回 PermissionStatus，需监听 change 事件
• document.hasStorageAccess() 判断是否拥有第三方 Cookie 访问权（iOS/Safari 关键检测点）
• 这类检测结果可能随用户操作实时变化，不能缓存一次结果长期使用

别依赖 userAgent 字符串做判断

几乎所有主流浏览器都允许伪造或冻结 navigator.userAgent，且新版 Chrome/Firefox 已默认启用 UA 重写（UA-CH），字符串里根本看不到真实版本。

• 查到 Chrome/120 不代表支持 Temporal.PlainDate——它在 Chrome 122 才默认开启
• Edge 基于 Chromium，但某些实验性 flag 默认关闭，userAgent 完全无法反映
• 即使你真要 fallback 到 UA，也必须配合实际能力检测，不能当作决策唯一依据

最麻烦的其实是那些「半实现」特性：API 存在、能调用、不报错，但行为偏差（比如正则的 dotAll 标志在旧 Safari 中被忽略）。这种只能靠最小化用例实测，没有捷径。