讲师中心 微信公众号

工具推荐

视频效率加速
updream

一键生成高质量推广成片

Laper
Laper

剧本策划到成片协作

Seko
Seko

AI短剧一键生成成片

剧云
剧云

中文短剧剧本制作平台

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

胖静君_3543

胖静君_3543

发布时间:2026-01-25 12:25:09

|

507人浏览过

|

来源于php中文网

原创

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

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

现代 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 在部分旧版 Chrome 中存在但构造会抛错;Array.prototype.at 在早期 Safari 中存在但返回 undefined 而非正确值。

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

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

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

Theta EdgeCloud Skill
Theta EdgeCloud Skill

Theta EdgeCloud API密钥优先的运行时框架,具备安全的命令级授权与试运行安全保障。

下载

立即学习“Java免费学习笔记(深入)”;

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

相关文章

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

超级简历WonderCV

一款AI办公效率工具,主要用于免费求职简历模版下载制作,应届生职场人必备简历制作神器,适合需要提升相关任务效率的用户。

花生AI
花生AI Hot

一款AI视频创作工具,主要用于B站推出的AI视频创作工具,适合需要提升相关任务效率的用户。

Loomy
Loomy Hot

一款AI工具,主要用于科大讯飞发布的桌面级 AI 助理,比 OpenClaw 更易用、更安全!,适合需要提升相关任务效率的用户。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

超级麦吉

一款通过数字员工协作完成调研、数据分析与文档制作的AI办公平台。

UP简历
UP简历 Hot

一款AI办公效率工具,主要用于基于AI技术的免费在线简历制作工具,适合需要提升相关任务效率的用户。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

二狗PPT
二狗PPT Hot

一款AI演示文稿工具,主要用于专为中式职场打造的AI PPT生成工具,适合需要提升相关任务效率的用户。

相关专题

更多
chrome什么意思
chrome什么意思

chrome是浏览器的意思,由Google开发的网络浏览器,它在2008年首次发布,并迅速成为全球最受欢迎的浏览器之一。本专题为大家提供chrome相关的文章、下载、课程内容,供大家免费下载体验。

2966

2023.08.11

chrome无法加载插件怎么办
chrome无法加载插件怎么办

chrome无法加载插件可以通过检查插件是否已正确安装、禁用和启用插件、清除插件缓存、更新浏览器和插件、检查网络连接和尝试在隐身模式下加载插件方法解决。更多关于chrome相关问题,详情请看本专题下面的文章。php中文网欢迎大家前来学习。

6139

2023.11.06

Chrome开启无痕模式
Chrome开启无痕模式

本专题整合了Chrome无痕模式开启相关内容,阅读专题下面的文章了解更多详细教程。

4387

2026.03.24

edge是什么浏览器
edge是什么浏览器

Edge是一款由Microsoft开发的网页浏览器,是Windows 10操作系统中默认的浏览器,其目标是提供更快、更安全、更现代化的浏览器体验。本专题为大家提供edge浏览器相关的文章、下载、课程内容,供大家免费下载体验。

3142

2023.08.21

IE浏览器自动跳转EDGE如何恢复
IE浏览器自动跳转EDGE如何恢复

ie浏览器自动跳转edge的解决办法:1、更改默认浏览器设置;2、阻止edge浏览器的自动跳转;3、更改超链接的默认打开方式;4、禁用“快速网页查看器”;5、卸载edge浏览器;6、检查第三方插件或应用程序等等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

3054

2024.03.05

如何解决Edge打开但没有标题的问题
如何解决Edge打开但没有标题的问题

若 Microsoft Edge 浏览器打开后无标题(窗口空白或标题栏缺失),可尝试以下方法解决: 重启 Edge:关闭所有窗口,重新启动浏览器。 重置窗口布局:右击任务栏 Edge 图标 → 选择「最大化」或「还原」。 禁用扩展:进入 edge://extensions 临时关闭插件测试。 重置浏览器设置:前往 edge://settings/reset 恢复默认配置。 更新或重装 Edge:检查最新版本,或通过控制面板修复

3392

2025.04.24

cookie
cookie

Cookie 是一种在用户计算机上存储小型文本文件的技术,用于在用户与网站进行交互时收集和存储有关用户的信息。当用户访问一个网站时,网站会将一个包含特定信息的 Cookie 文件发送到用户的浏览器,浏览器会将该 Cookie 存储在用户的计算机上。之后,当用户再次访问该网站时,浏览器会向服务器发送 Cookie,服务器可以根据 Cookie 中的信息来识别用户、跟踪用户行为等。

12839

2023.06.30

document.cookie获取不到怎么解决
document.cookie获取不到怎么解决

document.cookie获取不到的解决办法:1、浏览器的隐私设置;2、Same-origin policy;3、HTTPOnly Cookie;4、JavaScript代码错误;5、Cookie不存在或过期等等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

1326

2023.11.23

Postman身份认证怎么配置
Postman身份认证怎么配置

本专题从实际API接口调试场景出发,讲解Postman身份认证的完整配置流程,包括常见认证协议介绍、授权参数设置、访问令牌填写、OAuth 2.0授权及认证失败排查,帮助用户正确完成接口授权与访问验证。

80

2026.11.06

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WebStorm 官方调试文档
WebStorm 官方调试文档

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 12.5万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.8万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn