JavaScript常用检测脚本

封面图 • 2025-10-21 • JavaScript

在 JavaScript 开发中，为了确保代码的健壮性和兼容性，常常会使用一些**检测脚本**来判断浏览器环境、功能支持情况、设备类型等。以下是一些常用的 JavaScript 检测脚本示例，适用于不同场景：

---

## 一、浏览器检测（User-Agent）

```javascript
// 获取 User-Agent 字符串
const userAgent = navigator.userAgent;

// 判断是否为 Chrome 浏览器
const isChrome = /Chrome/.test(userAgent) && !/Edg/.test(userAgent);

// 判断是否为 Edge 浏览器
const isEdge = /Edg/.test(userAgent);

// 判断是否为 Safari 浏览器
const isSafari = /Safari/.test(userAgent) && !/Chrome/.test(userAgent);

// 判断是否为 Firefox 浏览器
const isFirefox = /Firefox/.test(userAgent);

// 判断是否为 IE 浏览器（IE11）
const isIE11 = /Trident\/7\./.test(userAgent);
```

---

## 二、功能检测（Feature Detection）

### 1. 检测 `localStorage` 支持

```javascript
function hasLocalStorage() {
  try {
    localStorage.setItem('test', '1');
    localStorage.removeItem('test');
    return true;
  } catch (e) {
    return false;
  }
}
```

### 2. 检测 `fetch` API 支持

```javascript
function hasFetch() {
  return 'fetch' in window;
}
```

### 3. 检测 `Promise` 支持

```javascript
function hasPromise() {
  return 'Promise' in window;
}
```

### 4. 检测 `addEventListener` 支持

```javascript
function hasAddEventListener() {
  return 'addEventListener' in window;
}
```

---

## 三、设备检测

### 1. 检测是否为移动端设备

```javascript
function isMobileDevice() {
  return /Mobi|Android|iPhone|iPad|iPod|BlackBerry|Windows Phone/i.test(navigator.userAgent);
}
```

### 2. 检测是否为平板设备（如 iPad）

```javascript
function isTabletDevice() {
  return /iPad|Android|Tablet/i.test(navigator.userAgent);
}
```

---

## 四、语言和区域检测

### 1. 获取用户语言设置

```javascript
const userLanguage = navigator.language || navigator.userLanguage;
console.log('用户语言:', userLanguage);
```

### 2. 检测是否为中文环境

```javascript
function isChineseEnvironment() {
  const lang = navigator.language || navigator.userLanguage;
  return lang.startsWith('zh');
}
```

---

## 五、网络状态检测

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

// 监听网络状态变化
window.addEventListener('online', () => {
  console.log('网络已连接');
});

window.addEventListener('offline', () => {
  console.log('网络已断开');
});
```

---

## 六、DOM 操作检测

### 1. 检测元素是否存在

```javascript
function elementExists(selector) {
  return document.querySelector(selector) !== null;
}
```

### 2. 检测元素是否可见

```javascript
function isVisible(element) {
  return !!(element.offsetWidth || element.offsetHeight || element.getClientRects().length);
}
```

---

## 七、ES6+ 特性检测

```javascript
function hasES6Features() {
  return (
    typeof Symbol !== 'undefined' &&
    typeof Promise !== 'undefined' &&
    typeof Array.from !== 'undefined' &&
    typeof Object.assign !== 'undefined'
  );
}
```

---

## 八、跨域检测（CORS）

```javascript
function checkCors(url) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.onload = function () {
      resolve(true);
    };
    img.onerror = function () {
      resolve(false);
    };
    img.src = url;
  });
}
```

---

## 九、性能检测（简单方式）

```javascript
function measurePerformance(fn, iterations = 1000) {
  const start = performance.now();
  for (let i = 0; i < iterations; i++) {
    fn();
  }
  const end = performance.now();
  console.log(`执行 ${iterations} 次耗时: ${end - start} ms`);
}
```

---

## 十、常用检测库推荐

- **[Modernizr](https://modernizr.com/)**：用于 HTML5 和 CSS3 功能检测。
- **[UA-parser.js](https://github.com/faisalman/ua-parser-js)**：更全面的 User-Agent 解析工具。
- **[Detect.js](https://github.com/detectlanguage/detect.js)**：语言检测库。

---

如果你有特定的检测需求（比如检测 WebAssembly、WebGL、Canvas 等），也可以告诉我，我可以提供更详细的脚本。