JavaScript常用检测脚本

封面图 • 2026-01-02 • JavaScript

JavaScript 常用的检测脚本通常用于检测浏览器特性、用户代理、设备信息、功能支持等。以下是一些常见的 JavaScript 检测脚本示例，适用于不同场景：

---

## 一、检测浏览器类型和版本

```javascript
// 检测浏览器名称
function getBrowser() {
    var userAgent = window.navigator.userAgent;
    if (userAgent.indexOf("Edg") > -1) return "Microsoft Edge";
    if (userAgent.indexOf("Firefox") > -1) return "Mozilla Firefox";
    if (userAgent.indexOf("Safari") > -1 && userAgent.indexOf("Chrome") == -1) return "Apple Safari";
    if (userAgent.indexOf("Chrome") > -1) return "Google Chrome";
    if (userAgent.indexOf("MSIE") > -1 || userAgent.indexOf("Trident") > -1) return "Internet Explorer";
    return "Unknown Browser";
}

// 检测浏览器版本
function getBrowserVersion() {
    var ua = navigator.userAgent;
    var match = ua.match(/(edge|firefox|chrome|safari|opera|msie|trident)\/?\s*(\d+)/i);
    return match ? match[2] : "Unknown";
}
```

---

## 二、检测操作系统

```javascript
function getOS() {
    var userAgent = window.navigator.userAgent;
    var os = "Unknown OS";

if (userAgent.indexOf("Win") != -1) os = "Windows";
    else if (userAgent.indexOf("Mac") != -1) os = "Mac";
    else if (userAgent.indexOf("Linux") != -1) os = "Linux";
    else if (userAgent.indexOf("Android") != -1) os = "Android";
    else if (userAgent.indexOf("iPhone") != -1 || userAgent.indexOf("iPad") != -1) os = "iOS";
    else if (userAgent.indexOf("X11") != -1) os = "Unix";
    else if (userAgent.indexOf("SunOS") != -1) os = "Solaris";

return os;
}
```

---

## 三、检测是否为移动端

```javascript
function isMobile() {
    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
}
```

---

## 四、检测是否支持 HTML5 和 CSS3 功能

```javascript
// 检测 localStorage 支持
function supportsLocalStorage() {
    try {
        return 'localStorage' in window && window['localStorage'] !== null;
    } catch (e) {
        return false;
    }
}

// 检测 Canvas 支持
function supportsCanvas() {
    return !!window.CanvasRenderingContext2D;
}

// 检测 Web Workers
function supportsWebWorkers() {
    return typeof window.Worker !== 'undefined';
}

// 检测 Fetch API
function supportsFetch() {
    return typeof window.fetch === 'function';
}
```

---

## 五、检测网络连接状态

```javascript
function checkOnlineStatus() {
    return navigator.onLine;
}
```

---

## 六、检测用户语言

```javascript
function getUserLanguage() {
    return window.navigator.language || window.navigator.userLanguage;
}
```

---

## 七、检测屏幕分辨率

```javascript
function getScreenResolution() {
    return `${screen.width}x${screen.height}`;
}
```

---

## 八、检测是否支持 WebGL

```javascript
function supportsWebGL() {
    var canvas = document.createElement('canvas');
    return !!(window.WebGLRenderingContext && (
        canvas.getContext('webgl') ||
        canvas.getContext('experimental-webgl')
    ));
}
```

---

## 九、检测是否支持 ES6+ 特性（如 `let`、`const`）

```javascript
function supportsES6() {
    try {
        eval("let x = 1;");
        return true;
    } catch (e) {
        return false;
    }
}
```

---

## 十、使用 Modernizr 进行功能检测（推荐）

Modernizr 是一个 JavaScript 库，可以检测浏览器对 HTML5 和 CSS3 的支持情况。

### 示例：

```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<script>
    if (Modernizr.canvas) {
        // 支持 canvas
    } else {
        // 不支持 canvas
    }
</script>
```

---

## 总结

| 检测内容 | 脚本 |
|----------|------|
| 浏览器类型 | `getBrowser()` |
| 操作系统 | `getOS()` |
| 移动端 | `isMobile()` |
| HTML5/CSS3 支持 | `supportsLocalStorage()` 等 |
| 网络状态 | `checkOnlineStatus()` |
| 用户语言 | `getUserLanguage()` |
| 屏幕分辨率 | `getScreenResolution()` |
| WebGL 支持 | `supportsWebGL()` |

如果你有特定的检测需求（比如检测是否支持 WebSocket、Web Audio API、IndexedDB 等），欢迎告诉我，我可以为你定制相应的检测脚本。