如何用js检测浏览器类型

这个需求在前端开发当中是很常见的，大家都知道我们写的js或css在浏览器中是有兼容问题的，当下虽然大家可能不用感受的IE6带来的痛苦（别问我为什么是痛苦），但是你负责的项目本身就是政府、医院之类的项目，这个时候还是得受兼容问题的困扰。

解决方案一：老老实实的在写html、css和js的时候就考虑兼容的问题，边写边测试，完成后自然就是兼容的了。这就需要你下载各种浏览器，IE浏览器就用IETester测试（IETester是一个免费的Web浏览器调试工具 ），IETester的坑非常多，根本不准，真实IE6还是会出bug（哭），后面学乖了，安装虚拟机，虚拟机里面装XP，XP自带了IE6，做好还用真的浏览器测试一下。这种方法花费的精力蛮多的，你自己搜索一下IE6/7/8的css兼容问题就明白了，所以还是用方法二吧。

解决方案二：直接检测浏览器类型和版本，给出提示信息，直接让用户不用IE打开就行，那就是让用户升级浏览器了，一劳永逸的方法。效果如下所示：

具体的实现方法也比较简单，JavaScript 包含一个名为 Navigator 的对象 ，Navigator 包含了有关访问者浏览器的信息，包括浏览器类型、版本等等 。Navigator对象里面含有两个重要的属性，appName （保存浏览器类型 ），appVersion （保存有浏览器的版本信息 ）。下面我们用代码来测试一下：

[code]<script type=\"text/javascript\">var browser = navigator.appName;//获取浏览器名字var b_version = navigator.appVersion;//获取浏览器版本信息var version = parseFloat(b_version);//提取浏览器版本号​document.write(\"浏览器名称是: \" + browser)//浏览器名称是: Netscapedocument.write(\"<br />\")document.write(\"浏览器版本是: \" + version)//浏览器版本是: 5</script>

上面例子中的 browser 变量存有浏览器的名称，比如，非IE显示\”Netscape\” 或者 IE显示\”Microsoft Internet Explorer\” ，所以只能判别是IE还是非IE,如果你是想让用户不用IE浏览器，这样也可以了。这里要注意一点，IE的版本号是有点问题的，IE4/5/6的版本号都是4.0，所以我们就可以做到：如果用户使用的是IE6或以下版本，请用户升级浏览器。

[code]<script type=\"text/javascript\">function detectBrowser() {var browser = navigator.appName//获取浏览器名字var b_version = navigator.appVersion//获取浏览器版本信息var version = parseFloat(b_version)//提取浏览器版本号​if ((browser == \"Netscape\" || browser == \"Microsoft Internet Explorer\")&& (version >= 4)) {console.log(\'非IE浏览器，能访问页面\');}else { alert(\"优秀的小伙伴都选择切换其他浏览器或升级IE浏览器了哦\") }}​detectBrowser();//调用函数，判别浏览器，如果是IE低版本提示用户升级</script>

当然，如果你想判别具体是哪种浏览器，那还得利用Navigator 的对象的userAgent属性，比如：

[code]var userAgent = navigator.userAgent;console.log(userAgent);

这里打印的是：Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:73.0) Gecko/20100101 Firefox/73.0 ，

用火狐测试；只要我们判断这段字符串里面包含Firefox就可以判断当下我们就是用火狐浏览器了，同样的方法我们可以用来检测各个浏览器：

[code]function getBrowserType(){var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串var browser=\'unknown\';if (userAgent.indexOf(\"IE\")!=-1) {//字符串含有IE字段，表明是IE浏览器browser=\"IE\";}else if(userAgent.indexOf(\'Firefox\')!=-1){//字符串含有Firefox字段，表明是火狐浏览器browser=\"Firefox\";}else if(userAgent.indexOf(\'OPR\')!=-1){//Operabrowser=\"Opera\";}else if(userAgent.indexOf(\'Chrome\')!=-1){//Chromebrowser=\"Chrome\";}else if(userAgent.indexOf(\'Safari\')!=-1){//Safaribrowser=\"Safari\";}else if(userAgent.indexOf(\'Trident\')!=-1){//IE内核browser=\'IE 11\';}return browser;}

如果你还想进一步判断IE浏览器的版本 ，比如：edge，ie11，10，9，8，7，6，5，4 ，代码如下：

[code]// 获取IE版本function IEVersion() {// 取得浏览器的userAgent字符串var userAgent = navigator.userAgent;// 判断是否为小于IE11的浏览器var isLessIE11 = userAgent.indexOf(\'compatible\') > -1 && userAgent.indexOf(\'MSIE\') > -1;// 判断是否为IE的Edge浏览器var isEdge = userAgent.indexOf(\'Edge\') > -1 && !isLessIE11;// 判断是否为IE11浏览器var isIE11 = userAgent.indexOf(\'Trident\') > -1 && userAgent.indexOf(\'rv:11.0\') > -1;if (isLessIE11) {var IEReg = new RegExp(\'MSIE (\\\\d+\\\\.\\\\d+);\');// 正则表达式匹配浏览器的userAgent字符串中MSIE后的数字部分，，这一步不可省略！！！IEReg.test(userAgent);// 取正则表达式中第一个小括号里匹配到的值var IEVersionNum = parseFloat(RegExp[\'$1\']);if (IEVersionNum === 7) {// IE7return 7} else if (IEVersionNum === 8) {// IE8return 8} else if (IEVersionNum === 9) {// IE9return 9} else if (IEVersionNum === 10) {// IE10return 10} else {// IE版本<7return 6}} else if (isEdge) {// edgereturn \'edge\'} else if (isIE11) {// IE11return 11} else {// 不是ie浏览器return -1}}

综合上面的方法，我们就可以回到今天的主题啦，我们的需求是：如果用户使用的是IE5/6/7/8，提示用户升级或切换其他浏览器：

[code]第一步：声明一个函数（可以判断各个浏览器和版本）function getBroswerAndVersion(){//该函数可以判断各种浏览器和版本，最厉害的版本var os = navigator.platform;var userAgent = navigator.userAgent;var info = \"\";var tempArray = \"\";//判断浏览器版本var isOpera = userAgent.indexOf(\"Opera\") > -1; //判断是否Opera浏览器var isIE = userAgent.indexOf(\"compatible\") > -1 && userAgent.indexOf(\"MSIE\") > -1 && !isOpera; //判断是否IE浏览器var isEdge = userAgent.toLowerCase().indexOf(\"edge\") > -1 && !isIE; //判断是否IE的Edge浏览器var isIE11 = (userAgent.toLowerCase().indexOf(\"trident\") > -1 && userAgent.indexOf(\"rv\") > -1);if (/[Ff]irefox(\\/\\d+\\.\\d+)/.test(userAgent)) {tempArray = /([Ff]irefox)\\/(\\d+\\.\\d+)/.exec(userAgent);info += tempArray[1] + tempArray[2];} else if (isIE) {var version = \"\";var reIE = new RegExp(\"MSIE (\\\\d+\\\\.\\\\d+);\");reIE.test(userAgent);var fIEVersion = parseFloat(RegExp[\"$1\"]);if (fIEVersion == 7){ version = \"IE7\"; }else if (fIEVersion == 8){ version = \"IE8\"; }else if (fIEVersion == 9){ version = \"IE9\"; }else if (fIEVersion == 10){ version = \"IE10\"; }else{ version = \"0\" }info += version;} else if (isEdge) {info += \"Edge\";} else if (isIE11) {info += \"IE11\";} else if (/[Cc]hrome\\/\\d+/.test(userAgent)) {tempArray = /([Cc]hrome)\\/(\\d+)/.exec(userAgent);info += tempArray[1] + tempArray[2];} else if (/[Vv]ersion\\/\\d+\\.\\d+\\.\\d+(\\.\\d)* *[Ss]afari/.test(userAgent)) {tempArray = /[Vv]ersion\\/(\\d+\\.\\d+\\.\\d+)(\\.\\d)* *([Ss]afari)/.exec(userAgent);info += tempArray[3] + tempArray[1];} else if (/[Oo]pera.+[Vv]ersion\\/\\d+\\.\\d+/.test(userAgent)) {tempArray = /([Oo]pera).+[Vv]ersion\\/(\\d+)\\.\\d+/.exec(userAgent);info += tempArray[1] + tempArray[2];} else {info += \"unknown\";}return info;}

第二步：调用函数，得到的结果再判断给用户提示即可

[code]var bro = getBroswerAndVersion();//上面第一步封装的函数，调用会得到一个返回值if(bro==\"IE5\" || bro==\"IE6\" || bro==\"IE7\" || bro==\"IE8\" ){alert(\"浏览器版本过低!请升级至IE9以上\");//此处应该显示一个漂亮的图片，让用户觉得再不升级就是out了}