如何在 JavaScript 中优雅地检测浏览器类型和版本：从 UserAgent 到实用工具

已于 2025-03-22 17:00:14 修改
阅读量451 收藏 5
点赞数 3
文章标签： 前端 javascript 前端框架 青少年编程
于 2024-07-22 17:33:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_41644392/article/details/140615285
版权

在前端开发中，检测用户的浏览器类型和版本是一项常见需求。无论是为了兼容性提示、功能限制还是优化用户体验，一个可靠的浏览器检测工具都能派上大用场。今天，我将带你深入剖析一个 JavaScript 函数 test_browser，它通过解析 navigator.userAgent 来识别浏览器内核和版本，并在控制台输出友好提示。我们会从原始代码出发，逐步优化，最终打造一个简洁、实用的解决方案！

为什么需要检测浏览器？

假设你开发了一个依赖现代 Web API 的应用（如 WebRTC 或 ES6+ 特性），但某些老旧浏览器不支持这些功能。这时，检测浏览器类型和版本就能帮助你：

  • 提示用户：告知用户当前浏览器是否兼容。
  • 条件加载：根据浏览器版本加载不同的代码。
  • 数据分析：统计用户使用的浏览器分布。

下面，我们从原始代码开始，探索如何实现这一功能。

初始代码：一个实用的起点

以下是原始的 test_browser 函数代码：

function test_browser() {
  var ua = navigator.userAgent,
    tem,
    M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
  if (/trident/i.test(M[1])) {
    tem = /\brv[ :]+(\d+)/g.exec(ua) || [];
    return { name: 'IE', version: tem[1] || '' };
  }
  if (M[1] === 'Chrome') {
    tem = ua.match(/\bOPR|Edge\/(\d+)/);
    if (tem != null) {
      return { name: 'Opera', version: tem[1] };
    }
  }
  M = M[2] ? [M[1], M[2]] : [navigator.appName, navigator.appVersion, '-?'];
  if ((tem = ua.match(/version\/(\d+)/i)) != null) {
    M.splice(1, 1, tem[1]);
  }
  const browser = {
    '内核类型': M[0],
    '内核版本': M[1],
  };
  console.table(browser);
  if (browser['内核类型'] === 'Chrome') {
    if ((parseInt(browser.version) < 73)) {
      console.info('%c该浏览器版本过低 不兼容该浏览器 请使用 Chrome内核 73以上版本的浏览器', 'color:red; font-size:30px;font-weight:bold;');
    } else {
      console.info('%c支持该浏览器，请放心使用，推荐使用最新的Chrome浏览器！', 'color:red; font-size:30px;font-weight:bold;');
    }
  }
  if (browser['内核类型'] === 'Firefox') {
    if ((parseInt(browser.version) < 69)) {
      console.info('%c该浏览器版本过低 不兼容该浏览器 请使用 Chrome内核 73以上版本的浏览器', 'color:red; font-size:30px;font-weight:bold;');
    } else {
      console.info('%c支持该浏览器，请放心使用，推荐使用最新的Chrome浏览器！', 'color:red; font-size:30px;font-weight:bold;');
    }
  }
  if (browser['内核类型'] !== 'Firefox' && browser['内核类型'] !== 'Chrome') {
    console.info('%不兼容该浏览器 请使用Chrome内核 73以上版本的浏览器', 'color: red; font-size:30px;font-weight:bold;');
  }
  return browser;
}
test_browser();

运行结果示例（假设 Chrome 126）：

{ '内核类型': 'Chrome', '内核版本': '126' }

这个函数通过正则表达式解析 navigator.userAgent，识别主流浏览器（如 Chrome、Firefox、IE），并根据版本号输出兼容性提示。但它存在一些问题：

  • 代码重复：提示逻辑重复性高。
  • 可读性差：嵌套条件和魔法数字让代码显得杂乱。
  • 扩展性不足：添加新浏览器支持不够灵活。

让我们一步步优化它。

优化代码：从“能用”到“优雅”

1. 规范化返回值：使用英文属性名

原始代码使用中文属性名 '内核类型' 和 '内核版本'，虽然直观，但不利于国际化。我们改为英文属性名，并添加类型定义（假设用 TypeScript）：

interface BrowserInfo {
  name: string;
  version: string;
}

2. 提取浏览器检测逻辑：模块化解析

将浏览器检测逻辑抽取为独立函数，提升可读性和复用性：

const detectBrowser = (ua: string): BrowserInfo => {
  const match = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
  let name = match[1] || '';
  let version = match[2] || '';

  // 处理 Trident (IE)
  if (/trident/i.test(name)) {
    const rvMatch = /\brv[ :]+(\d+)/g.exec(ua);
    return { name: 'IE', version: rvMatch?.[1] || '' };
  }

  // 处理 Chrome 下的特殊情况 (Opera, Edge)
  if (name === 'Chrome') {
    const specialMatch = ua.match(/\b(OPR|Edge)\/(\d+)/);
    if (specialMatch) {
      return { name: specialMatch[1] === 'OPR' ? 'Opera' : 'Edge', version: specialMatch[2] };
    }
  }

  // 默认情况
  const versionMatch = ua.match(/version\/(\d+)/i);
  if (versionMatch) version = versionMatch[1];
  name = name || navigator.appName;
  version = version || navigator.appVersion;

  return { name, version };
};

3. 优化兼容性提示：配置化规则

原始代码中对 Chrome 和 Firefox 的版本检查逻辑重复，我们可以用配置对象来简化：

const browserSupportRules: Record<string, { minVersion: number; message: string }> = {
  Chrome: {
    minVersion: 73,
    message: '请使用 Chrome 73 或以上版本的浏览器',
  },
  Firefox: {
    minVersion: 69,
    message: '请使用 Firefox 69 或以上版本的浏览器',
  },
};

const checkCompatibility = ({ name, version }: BrowserInfo) => {
  const rule = browserSupportRules[name];
  const style = 'color: red; font-size: 20px; font-weight: bold;';

  if (!rule) {
    console.info(`%c不支持的浏览器：${name}，推荐使用 Chrome 73+`, style);
    return false;
  }

  const versionNum = parseInt(version, 10);
  if (versionNum < rule.minVersion) {
    console.info(`%c浏览器版本过低 (${name} ${version})，${rule.message}`, style);
    return false;
  }

  console.info(`%c支持 ${name} ${version}，推荐使用最新 Chrome 浏览器！`, 'color: green; font-size: 20px;');
  return true;
};

4. 整合与现代化：ES6+ 语法 将所有逻辑整合为一个现代化的函数：

function testBrowser(): BrowserInfo {
  const ua = navigator.userAgent;
  const browser = detectBrowser(ua);

  console.table(browser);
  checkCompatibility(browser);

  return browser;
}

// 调用
testBrowser();

最终代码：简洁与强大的结合

以下是优化后的完整代码：

interface BrowserInfo {
  name: string;
  version: string;
}

const detectBrowser = (ua: string): BrowserInfo => {
  const match = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
  let name = match[1] || '';
  let version = match[2] || '';

  if (/trident/i.test(name)) {
    const rvMatch = /\brv[ :]+(\d+)/g.exec(ua);
    return { name: 'IE', version: rvMatch?.[1] || '' };
  }

  if (name === 'Chrome') {
    const specialMatch = ua.match(/\b(OPR|Edge)\/(\d+)/);
    if (specialMatch) {
      return { name: specialMatch[1] === 'OPR' ? 'Opera' : 'Edge', version: specialMatch[2] };
    }
  }

  const versionMatch = ua.match(/version\/(\d+)/i);
  if (versionMatch) version = versionMatch[1];
  name = name || navigator.appName;
  version = version || navigator.appVersion;

  return { name, version };
};

const browserSupportRules: Record<string, { minVersion: number; message: string }> = {
  Chrome: { minVersion: 73, message: '请使用 Chrome 73 或以上版本的浏览器' },
  Firefox: { minVersion: 69, message: '请使用 Firefox 69 或以上版本的浏览器' },
};

const checkCompatibility = ({ name, version }: BrowserInfo) => {
  const rule = browserSupportRules[name];
  const style = 'color: red; font-size: 20px; font-weight: bold;';

  if (!rule) {
    console.info(`%c不支持的浏览器：${name}，推荐使用 Chrome 73+`, style);
    return false;
  }

  const versionNum = parseInt(version, 10);
  if (versionNum < rule.minVersion) {
    console.info(`%c浏览器版本过低 (${name} ${version})，${rule.message}`, style);
    return false;
  }

  console.info(`%c支持 ${name} ${version}，推荐使用最新 Chrome 浏览器！`, 'color: green; font-size: 20px;');
  return true;
};

function testBrowser(): BrowserInfo {
  const browser = detectBrowser(navigator.userAgent);
  console.table(browser);
  checkCompatibility(browser);
  return browser;
}

testBrowser();

运行结果（Chrome 126）

┌─────────┬──────────┐
│ (index) │ Values   │
├─────────┼──────────┤
│ name    │ Chrome   │
│ version │ 126      │
└─────────┴──────────┘
支持 Chrome 126，推荐使用最新 Chrome 浏览器！


支持 Chrome 126，推荐使用最新 Chrome 浏览器！    应用场景与扩展 这个工具适用于多种场景： • 兼容性检查：在应用加载时提示用户升级浏览器。 • 调试工具：快速查看当前浏览器信息。 • 统计分析：记录用户浏览器分布。  想进一步扩展？试试这些点子：

应用场景与扩展

这个工具适用于多种场景：

  • 兼容性检查：在应用加载时提示用户升级浏览器。
  • 调试工具：快速查看当前浏览器信息。
  • 统计分析：记录用户浏览器分布。

想进一步扩展？试试这些点子：

  • 支持更多浏览器：如 Safari、Edge 新版，扩展 browserSupportRules。
  • UI 提示：将 console.info 替换为弹窗或页面通知。
  • 版本范围：支持最低和最高版本限制。

总结：打造一个实用的浏览器检测工具

通过这次优化，我们将一个基础的浏览器检测函数提升为一个模块化、可扩展的工具。它不仅能准确识别浏览器类型和版本，还能提供友好的兼容性提示。希望这篇文章能帮你在项目中更好地处理浏览器兼容性问题。如果你有其他建议，欢迎在评论区交流！

关键词：JavaScript 浏览器检测、UserAgent 解析、浏览器兼容性检查、前端开发工具、优

安分小尧
关注
js 检测浏览器类型、版本号
rddataqingkong的博客
01-30 1865
js 检测浏览器类型、版本号
browser-upgrade:在网页顶部为旧 ie 浏览器（ie9 及以下）用户的用户显示一条消息
07-12
`browser-upgrade` 库就是为了解决这个问题，通过检测浏览器版本，提醒用户更新到更现代的浏览器。 2. **JavaScript 检测**：库的核心是通过 JavaScript 来检测用户正在使用的浏览器类型和版本。这通常涉及到 `...
使用js检测当前浏览器版本，多浏览器类型和版本号检测
09-21
js检测当前浏览器版本，在网络开发中我们经常要用到检测浏览器的版本和类型，以便网站支持兼容，尤其是对于ie各个版本浏览器的兼容。
HTML加浏览器的内核
weixin_52630329的博客
11-28 202
HTML加浏览器的内核 浏览器内核: -webkit- 谷歌浏览器内核 -moz- 火狐浏览器内核 -ms- 微软浏览器内核 -o- 欧朋浏览器内核
前端技巧：精准判断登录设备是移动端还是 PC 端
最新发布
qq_26024123的博客
03-20 1712
在前端开发过程中，判断用户的登录设备究竟是移动端还是PC端，这一需求极为常见。比如，为了给用户提供更适配的页面布局和交互体验，我们就需要知晓设备类型。下面就为大家详细介绍几种判断设备类型的方法。
js检测浏览器版本
诸葛苍穹
12-18 1094
function browser_version() { var e = navigator.userAgent.toLowerCase(); return e.match(/msie ([\d.]+)/) ? 1 : e.match(/firefox\/([\d.]+)/) ? 3 : e.match(/chrome\/([\d.]+)/) ? 5 : e.match(/opera
前端兼容性检测
a8725585的博客
11-20 892
链接地址https://caniuse.com/
【浏览器兼容性剖析】：window.open参数在各主流浏览器中的差异
本文首先介绍了浏览器兼容性的概念及其重要性，随后深入解析了JavaScript中window.open方法的定义、用途、参数及其在主流浏览器中的支持和行为。通过案例分析，探讨了在不同浏览器环境下，window.open的最佳实践和...
【JavaScript无缝滚动动画】：跨浏览器兼容性与SEO优化
本文首先介绍了JavaScript无缝滚动动画的基本概念，深入探讨了跨浏览器兼容性策略，包括兼容性问题类型、检测方法、实践技巧、测试与优化。接着，文章阐述了SEO优化理论与实践，特别是JavaScript与SEO的关系及其优化...
【油猴脚本跨浏览器兼容性】：一站式解决方案
![【油猴脚本跨浏览器兼容性】：一站式解决方案](https://img-blog.csdnimg.cn/20210504183125336.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5...这使得浏览器之间的兼容性问题成为网页开发者和使用者需要面对
jquery实现浏览器嗅探器特效.zip
07-04
在浏览器嗅探器中，jQuery主要被用来优雅地处理DOM元素，并实现跨浏览器的兼容性。 浏览器嗅探器的核心功能在于获取浏览器的相关信息，这包括： 1. **浏览器类型**：通过`navigator.userAgent`属性，我们可以获取...
js检测浏览器版本 javascript检测浏览器
06-07
可以检测 目前主流的浏览器及版本，包括 *Microsoft Internet Explorer IE浏览器 * --> TheWorld 世界之窗 * --> TT浏览器 * --> 360浏览器 * Mathon 傲游浏览器 * Opera Opera浏览器 * Firefox 火狐浏览器 * Chrome Chrome浏览器 因为360的流氓性质，现在已经在 navigator.userAgent 检测不到360浏览器的特征。只能使用其他办法。这里是我自己找的一种办法 。 缺点是对移动端浏览器设备没统计和测试过，有什么问题和建议可以在留言中补充，我会对它进行完善。 尊重劳动成果，1个资源分即可以！
js检测浏览器版本、核心、是否移动端示例
10-26
主要介绍了js检测浏览器版本、核心、是否移动端示例,需要的朋友可以参考下
利用JavaScript判断浏览器类型及版本
11-23
本文将介绍如何使用Javascript来检测浏览器的类型以及版本号，包括猎豹浏览器、搜狗浏览器、傲游浏览器、360极速浏览器、360安全浏览器、QQ浏览器、百度浏览器、IE,Firefox,Chrome,safari,Opera等。 效果图 实例代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>JavaScript判断浏览器类型及版本</title> [removed]
JS浏览器版本检测
赳赳万里鲲
12-26 494
在WEB开发中经常性的会遇到浏览器不兼容的问题。要解决兼容性问题就要让代码识别其在哪种内核，直接看代码：//1、判断浏览器内核 var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串 var browserType = userAgent.indexOf("Opera"); if (browserType!== -1) { retu
js判断浏览器版本
z1012890225的专栏
01-29 425
"text/javascript">                   var userAgent = navigator.userAgent,                    rMsie = /(msie\s|trident.*rv:)([\w.]+)/,                    rFirefox = /(firefox)\/([\w.]+)/,   
前端浏览器兼容性
疯狂假前端的博客
11-14 682
【代码】前端浏览器兼容性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值