悠悠楠杉
网站页面
如何通过JS脚本获取浏览器信息：全面掌握浏览器检测技巧
12/01
![]()
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36
我们可以通过正则表达式从中提取关键信息。下面是一个简单的解析函数示例：
javascript
function getBrowserInfo() {
const ua = navigator.userAgent;
let browser = 'Unknown';
let version = 'Unknown';
if (ua.indexOf('Chrome') > -1) {
browser = 'Chrome';
version = ua.match(/Chrome\/(\d+\.\d+)/)?.[1] || 'Unknown';
} else if (ua.indexOf('Firefox') > -1) {
browser = 'Firefox';
version = ua.match(/Firefox\/(\d+\.\d+)/)?.[1] || 'Unknown';
} else if (ua.indexOf('Safari') > -1 && ua.indexOf('Chrome') === -1) {
browser = 'Safari';
version = ua.match(/Version\/(\d+\.\d+)/)?.[1] || 'Unknown';
} else if (ua.indexOf('MSIE') > -1 || ua.indexOf('Trident') > -1) {
browser = 'Internet Explorer';
version = ua.match(/(MSIE \d+\.\d+|rv:\d+\.\d+)/)?.[0].replace(/[^\d.]/g, '') || 'Unknown';
}
return {
browser: browser,
version: version,
platform: navigator.platform,
language: navigator.language,
isMobile: /Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(ua)
};
}
// 调用函数并输出结果
const info = getBrowserInfo();
console.log(info);
这段代码不仅能识别主流浏览器，还能判断是否为移动设备。值得注意的是，由于UserAgent可以被用户修改或伪造，因此它并非绝对可靠的依据，但在大多数实际场景中仍具备很高的参考价值。
除了UserAgent，我们还可以结合其他API进行更精确的判断。例如，利用window.chrome对象的存在来确认是否为Chrome系浏览器（包括Edge、Brave等），或者通过特性检测（feature detection）代替浏览器嗅探（browser sniffing）。比如：
javascript
const isChromium = !!window.chrome && !!window.chrome.runtime;
const supportsES6 = typeof Symbol === 'function';
这种方法更加健壮，因为它不依赖字符串匹配，而是检查实际支持的功能。
此外，在响应式设计中，判断设备类型尤为重要。除了通过UA判断移动端外，还可以结合屏幕尺寸、触摸事件支持等：
javascript
const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
综合以上方法，我们可以构建一个更加完善的浏览器信息采集模块，用于日志记录、A/B测试或动态资源加载。
总之，通过JavaScript获取浏览器信息是一项实用且必要的技能。虽然现代开发更推荐使用特性检测而非依赖UserAgent，但在特定场景下，合理利用navigator对象和UA解析仍能发挥重要作用。掌握这些技巧，能让我们的网页更具适应性与智能化。
