JavaScript 检测浏览器

在 Web 应用程序中，JavaScript 检测浏览器是很常见的操作。通过检测浏览器，可以根据不同浏览器的特性来实现不同的功能或优化页面性能。本文将介绍如何使用 JavaScript 检测浏览器。

检测浏览器类型

下面是几种检测浏览器类型的方法：

navigator.userAgent

navigator.userAgent 属性包含了浏览器的用户代理字符串，可以用来检测浏览器类型。

const userAgent = navigator.userAgent;
if (userAgent.indexOf("Firefox") > -1) {
  console.log("Firefox");
} else if (userAgent.indexOf("Chrome") > -1) {
  console.log("Chrome");
} else if (userAgent.indexOf("Safari") > -1) {
  console.log("Safari");
} else if (userAgent.indexOf("MSIE") > -1 || userAgent.indexOf("Trident/") > -1) {
  console.log("Internet Explorer");
} else {
  console.log("Unknown");
}

navigator.vendor

navigator.vendor 属性包含了浏览器厂商的名称，可以用来检测浏览器类型。

const vendor = navigator.vendor;
if (vendor.indexOf("Google") > -1) {
  console.log("Google Chrome");
} else if (vendor.indexOf("Apple") > -1) {
  console.log("Apple Safari");
} else if (vendor.indexOf("Mozilla") > -1) {
  console.log("Mozilla Firefox");
} else if (vendor.indexOf("Microsoft") > -1) {
  console.log("Microsoft Internet Explorer");
} else {
  console.log("Unknown browser");
}

window.chrome

window.chrome 属性在 Google Chrome 中存在，可以用来检测是否在 Chrome 浏览器中。

if (window.chrome) {
  console.log("Google Chrome");
} else {
  console.log("Not Google Chrome");
}

window.ActiveXObject

window.ActiveXObject 属性在 Internet Explorer 中存在，可以用来检测是否在 IE 浏览器中。

if (window.ActiveXObject !== undefined) {
  console.log("Microsoft Internet Explorer");
} else {
  console.log("Not Microsoft Internet Explorer");
}

检测浏览器版本

下面是几种检测浏览器版本的方法：

navigator.userAgent

navigator.userAgent 属性包含了浏览器的用户代理字符串，可以用正则表达式匹配出浏览器的版本号。

const userAgent = navigator.userAgent;
if (/Firefox\/([\d\.]+)/.test(userAgent)) {
  console.log(`Firefox ${RegExp.$1}`);
} else if (/Chrome\/([\d\.]+)/.test(userAgent)) {
  console.log(`Chrome ${RegExp.$1}`);
} else if (/Version\/([\d\.]+).*Safari/.test(userAgent)) {
  console.log(`Safari ${RegExp.$1}`);
} else if (/MSIE ([\d\.]+);/.test(userAgent) || userAgent.indexOf("Trident/") > -1) {
  console.log(`Internet Explorer ${RegExp.$1}`);
} else {
  console.log("Unknown browser");
}

navigator.appVersion

navigator.appVersion 属性包含了浏览器的版本信息，可以用来检测浏览器版本。

const appVersion = navigator.appVersion;
if (appVersion.indexOf("Firefox") > -1) {
  console.log(`Firefox ${appVersion.slice(appVersion.indexOf("Firefox")).split("/")[1]}`);
} else if (appVersion.indexOf("Chrome") > -1) {
  console.log(`Chrome ${appVersion.slice(appVersion.indexOf("Chrome")).split("/")[1]}`);
} else if (appVersion.indexOf("Safari") > -1) {
  console.log(`Safari ${appVersion.slice(appVersion.indexOf("Version")).split("/")[1]}`);
} else if (appVersion.indexOf("MSIE") > -1 || appVersion.indexOf("Trident/") > -1) {
  console.log(`Internet Explorer ${appVersion.slice(appVersion.indexOf("MSIE")).split(";")[0].split(" ")[1]}`);
} else {
  console.log("Unknown browser");
}

检测浏览器特性

下面是几种检测浏览器特性的方法：

Modernizr

Modernizr 是一个 JavaScript 库，可以检测当前浏览器是否支持各种 HTML5 和 CSS3 特性。

if (Modernizr.canvas) {
  console.log("Canvas is supported");
} else {
  console.log("Canvas is not supported");
}

DOM API

有些浏览器特性可以通过 DOM API 来检测，例如：

const isFullscreenSupported = document.fullscreenEnabled || document.webkitFullscreenEnabled || document.mozFullScreenEnabled || document.msFullscreenEnabled;
if (isFullscreenSupported) {
  console.log("Fullscreen is supported");
} else {
  console.log("Fullscreen is not supported");
}

总结

JavaScript 检测浏览器是很常见的操作，可以用于实现不同的功能或优化页面性能。本文介绍了几种方法来检测浏览器类型、浏览器版本和浏览器特性。需要注意的是，这些方法都不是 100% 可靠的，因为某些浏览器可能会伪装成其他浏览器或在不同版本中表现不同，所以在实际开发中需要测试和验证。