BOM怎么查询替代料 bom怎么查询

要检测浏览器类型和版本，可通过解析navigator.useragent字符串实现，但该方法不可靠、易格式化、维护成本高等问题；更推荐使用功能检测（如navigator中的'serviceworker'）、css.supports()、渐进增强等现代方法来判断功能支持情况，而不依赖浏览器类型；若必须获取浏览器信息，可使用较新的useragentdata api，但其简化程度仍然有限​​。

使用BOM（浏览器对象） Model）检测用户的浏览器类型和版本，主要是通过访问window.navigator对象，尤其是它的userAgent属性。这个字符串包含了浏览器、网络、渲染引擎等信息。虽然它能提供一些线索，但说实话，这个方法现在挺老派的，而且充满了各种坑。

解决方案说起用BOM来识别浏览器，我们主要寻找的就是navigator.userAgent这个字符串。它就像浏览器的“身份证”，里面密密麻麻地写着一系列信息。比如，你可能会看到“Mozilla/5.0” （Windows NT 10.0； Win64； x64) AppleWebKit/537.36 (KHTML，如 Gecko) Chrome/120.0.0.0 Safari/537.36 Edge/120.0.0.0”这样的东西。

要提取出浏览器类型和版本，通常我们需要用到正则表达式来匹配特定的关键词和版本号。这活儿有点像侦探破案，得从建立杂乱无章的线索查找里规律。

一个基本的思路是，先判断一些主流浏览器的特征字符串。

举个例子：function getBrowserInfo() { const ua = navigator.userAgent； let browserName = 'Unknown'； let browserVersion = 'Unknown'； // 优先检测Edge和Chrome，因为Edge的UA里也包含Chrome if (ua.indexOf(quot；Edgquot；) gt； -1) { // 新版Edge browserName = quot；Edgequot；； const matches = ua.match(/Edg\/(\d) \.\d )/)； if (matches amp；amp； matches[1]) { browserVersion = matches[1]； } } else if (ua.indexOf(quot；Chromequot；) gt； -1) { browserName = quot；Chromequot；； const matches = ua.match(/Chrome\/(\d \.\d )/)； if (matches amp；amp； matches[1]) { browserVersion = matches[1]；否则如果(ua.indexOf(quot；Firefoxquot；) gt； -1) { browserName = quot；Firefoxquot；； const matches = ua.match(/Firefox\/(\d \.\d )/)； if (matches amp；amp； matches[1]) { browserVersion = matches[1]； } } else if (ua.indexOf(quot；Safariquot；) gt； -1) { // Safari在Chrome之后判断 browserName = quot；Safariquot；； const matches = ua.match(/Version\/(\d \.\d ).*Safari/)； if (matches amp；amp； matches[1]) { browserVersion = matches[1]； } } else if (ua.indexOf(quot；MSIEquot；) gt； -1 || ua.indexOf(quot；Tridentquot；) gt； -1) { // IE老版本和新版本 browserName = quot；Internet Explorerquot；； if (ua.indexOf(quot；MSIEquot；) gt；-1) { const matches = ua.match(/MSIE)

(\d \.\d )/)； if (matches amp；amp； matches[1]) { browserVersion = matches[1]； } } else { // IE 11 const matches = ua.match(/rv：(\d \.\d )/)； if (matches amp；amp； matches[1]) { browserVersion = matches[1]； } } } return { name： browserName， version： browserVersion }；}const info = getBrowserInfo()；console.log(`浏览器类型： ${info.name}， 版本： ${info.version}`)；登录后复制

代码只是一个非常基础的例子，实际应用中会复杂化，因为不同的浏览器在userAgent字符串里有太多奇怪的“倾向好”和变数。比如，Chrome的userAge nt里会包含“Safari”，Edge会包含“Chrome”，这要求我们判断的顺序很重要。为什么在现代Web开发中，我们仍然需要关注浏览器兼容性？

你可能会觉得，现在都2024年了，浏览器版本都挺新的，是不是可以不用太纠结浏览器兼容性了？说实话，我以前也这么想。但现实往往会给你一记“耳光”。虽然主流浏览器更新得到迭代很快，大部分新功能都得到广泛支持，但总有一些特殊情况或者说“继承问题”让你不得不去考虑浏览器兼容性，甚至去识别它们。

比如，一些政府或大型企业内部系统，可能还在使用非常老旧的IE浏览器，或者被定制过的特定版本器。你的应用如果需要兼容这些“餐桌”，那可就得硬着头皮去浏览识别了。比如，一些特定的性能优化或者CSS Hack，有时候就是为了某个特定浏览器的某个版本而生。我遇到过一种情况，某些 CSS 属性在旧版本 Safari 上渲染有问题，通过不得不 JavaScript 检测到是 Safari，然后动态添加一个特定的类名来修改。

还有，数据分析和使用户行为追踪也可能需要这些信息。了解你的用户主要使用什么浏览器，什么版本，有助于你优化用户体验，或者确定哪些新功能可以参与使用，哪些需要降级处理。这不仅仅是技术问题，更涉及产品和运营层面的考量。navigator.userAgent在实际应用中会遇到哪些坑？

navigator.userAgent这个东西，用起来真是又让人爱又恨。它提供了信息，但同时也埋下了无数的坑。

最大的一个坑就是不可靠。用户代理字符串是可以被格式化的。很多浏览器扩展、开发者工具，甚至于一些恶意软件，都可以随意修改这个字符串。这意味着你检测到的信息，可能根本就不是用户真实的浏览器。我曾见过有人访问一些只支持IE的网站，把Chrome的UA改成IE的，这种情况下你的检测就完全失效了。

另外就是复杂性和维护成本。

userAgent字符串的格式并没有一个严格的标准，不同的浏览器厂商有自己的“方言”，而且它们还经常变。今天Chrome的UA是这样，明天可能就多串，或者少串。这意味着你的解析逻辑需要不断地更新和维护，简直就是个无底洞。每次浏览器大版本更新，你可能都得去查UA有没有变，有没有新的坑出现。

接下来就是模糊性。很多时候，一个userAgent字符串可能同时包含多个浏览器的关键词。比如前面提到的，Edge和Opera的UA里都带着“Chrome”字样。这就要求你的判断逻辑必须非常谨慎，知道更优先级，不能简单地看到“Chrome”就认为是Chrome，得先排除掉具体的浏览器。

最后，它也无法让你的浏览器到底支持哪些具体功能。 120，不代表你知道它支持WebGPU或者某些新的CSS选择器。这才是我们真正关心的。替代navigator.userAgent，现代Web开发有哪些推荐更的做法？

既然navigator.userAgent这么坑，那没有更好的办法呢？当然有，而且这些方法在现代Web开发中更受推崇，也具有“未来感”。

最推荐的，也是最核心的理念是特性检测（Feature）简单来说，就是直接检查浏览器是否支持某个特定的API、属性或方法，而不是去猜测它是哪个浏览器，然后推断它支持什么。

举个例子，如果你想知道浏览器是否支持Service Worker，你直接检查'serviceWorker' in navigator就可以了，而不是去判断是不是Chrome或者Firefox。如果你想知道某个CSS属性是否被支持，可以使用CSS.supports()方法，或者直接检查document.body.style.propertyName !==这种方式的好处是，它直接针对功能，无论用户用什么浏览器，只要它支持这个功能，你的代码就能跑。这一大堆了代码的健壮性和未来的兼容。//功能检测示例 if ('serviceWorker' in navigator) { console.log('浏览器支持 Service Worker')；} else { console.log('浏览器不支持 Service Worker')；}if (CSS.supports('display'， 'grid')) { console.log('浏览器支持 CSS 网格布局')；} else { console.log('浏览器不支持 CSS 网格布局')；}登录后复制

此外，渐进增强（Progressive Enhancement）和优雅降级（Graceful）降级）也是非常重要的设计理念。这意味着你首先为所有用户提供一个基础的、可用的体验，然后在此基础上，为支持更高级功能的设备提供更丰富的体验。即使某些浏览器不支持某些新功能，你的网站也依然能正常工作，只是可能没有那么炫酷。

当然，navigator.userAgentData是一个相对较新的API，它旨在提供一种更重构、更可靠的方式来浏览获取器信息，但目前其普及度还不够高，不能替代传统方法，而且它也明确于用户隐私保护，获取的信息可能不如userAgent那么详细。但未来，这可能是一个更好的方向。

在我看来，除非你真的有非常特殊的、无法通过特性检测的需求（比如，为了兼容某些特定版本的旧旧浏览器，或者为了修复某些只在特定浏览器上出现的渲染bug），否则应该尽量避免使用navigator.userAgent进行浏览器类型和版本的判断。功能检测，让你的代码更关注功能本身，而不是纠结于“我是谁，我在哪”。

以上就是如何用BOM检测用户的浏览器类型和版本？的详细内容，更多请关注乐哥常识网相关文章！