JavaScript常用检测脚本
封面图
•
2026-01-02
•
JavaScript
232
0
0
0
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 等),欢迎告诉我,我可以为你定制相应的检测脚本。
上一篇:
JavaScript常用检测脚本
下一篇:
js创建多维数组
标题录入,一次不能超过6条
留言
评论