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

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

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

typeofin 检测全局对象上的属性是否存在

适用于静态可枚举的 API,比如 Promisefetch

URLSearchParams 等。

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

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

存在性不等于可用性。比如 Intl.Locale 在部分旧版 Chrome 中存在但构造会抛错;Array.prototype.at 在早期 Safari 中存在但返回 undefined 而非正确值。

  • 写一个最小可行调用,捕获异常或检查返回值类型/行为
  • 示例:检测 at() 是否真正可用
function supportsArrayAt() {
  try {
    return [1,2,3].at(0) === 1;
  } catch {
    return false;
  }
}
  • 避免只测「不报错」,要测「返回值合理」——有些 polyfill 会静默失败或返回错误类型

Feature PolicyPermissions 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 中被忽略)。这种只能靠最小化用例实测,没有捷径。