好程序员web前端培训分享如何用js检测浏览器类型
这个需求在前端开发当中是很常见的，大家都知道我们写的js或css在浏览器中是有兼容问题的，当下虽然大家可能不用感受的IE6带来的痛苦（别问我为什么是痛苦），但是你负责的项目本身就是政府、医院之类的项目，这个时候还是得受兼容问题的困扰。
解决方案一： 老老实实的在写html、css和js的时候就考虑兼容的问题，边写边测试，完成后自然就是兼容的了。这就需要你下载各种浏览器，IE浏览器就用IETester测试（ IETest er 是一个免费的Web浏览器调试工具 ），IETester的坑非常多，根本不准，真实IE6还是会出bug（哭），后面学乖了，安装虚拟机，虚拟机里面装XP，XP自带了IE6，做好还用真的浏览器测试一下。这种方法花费的精力蛮多的，你自己搜索一下IE6/7/8的css兼容问题就明白了，所以还是用方法二吧。
解决方案二 ：直接检测浏览器类型和版本，给出提示信息，直接让用户不用IE打开就行，那就是让用户升级浏览器了，一劳永逸的方法。效果如下所示：
具体的实现方法也比较简单，JavaScript 包含一个名为 Navigator 的对象 ，Navigator 包含了有关访问者浏览器的信息，包括浏览器类型、版本等等 。Navigator对象里面含有两个重要的属性，appName （保存浏览器类型 ），appVersion （保存有浏览器的版本信息 ）。下面我们用代码来测试一下：
< script type = "text/javascript" >
var browser = navigator.appName; //获取浏览器名字 var b_version = navigator.appVersion; //获取浏览器版本信息 var version = parseFloat (b_version); //提取浏览器版本号
document .write( "浏览器名称是: " + browser) //浏览器名称是: Netscape document .write( "<br />" )
document .write( "浏览器版本是: " + version) //浏览器版本是: 5 < /script>
上面例子中的 browser 变量存有浏览器的名称，比如，非IE显示"Netscape" 或者 IE显示"Microsoft Internet Explorer" ，所以只能判别是IE还是非IE,如果你是想让用户不用IE浏览器，这样也可以了。这里要注意一点，IE的版本号是有点问题的，IE4/5/6的版本号都是4.0，所以我们就可以做到：如果用户使用的是IE6或以下版本，请用户升级浏览器。
< 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属性，比如：
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就可以判断当下我们就是用火狐浏览器了，同样的方法我们可以用来检测各个浏览器：
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 ){ //Opera browser = "Opera" ;
} else if (userAgent.indexOf( 'Chrome' ) !=- 1 ){ //Chrome browser = "Chrome" ;
} else if (userAgent.indexOf( 'Safari' ) !=- 1 ){ //Safari browser = "Safari" ;
} else if (userAgent.indexOf( 'Trident' ) !=- 1 ){ //IE内核 browser = 'IE 11' ;
}
return browser;}
如果你还想进一步判断IE浏览器的版本 ，比如：edge，ie11，10，9，8，7，6，5，4 ，代码如下：
// 获取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 ) {
// IE7 return 7
} else if (IEVersionNum === 8 ) {
// IE8 return 8
} else if (IEVersionNum === 9 ) {
// IE9 return 9
} else if (IEVersionNum === 10 ) {
// IE10 return 10
} else {
// IE版本<7 return 6
}
} else if (isEdge) {
// edge return 'edge'
} else if (isIE11) {
// IE11 return 11
} else {
// 不是ie浏览器 return - 1
}}
综合上面的方法，我们就可以回到今天的主题啦，我们的需求是：如果用户使用的是IE5/6/7/8，提示用户升级或切换其他浏览器：
第一步：声明一个函数（可以判断各个浏览器和版本）
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;}
第二步：调用函数，得到的结果再判断给用户提示即可
var bro = getBroswerAndVersion(); //上面第一步封装的函数，调用会得到一个返回值 if (bro == "IE5" || bro == "IE6" || bro == "IE7" || bro == "IE8" ){
alert( "浏览器版本过低!请升级至IE9以上" ); //此处应该显示一个漂亮的图片，让用户觉得再不升级就是out了 }
来自 “ ITPUB博客 ” ，链接：https://blog.itpub.net/69913864/viewspace-2689251/ ，如需转载，请注明出处，否则将追究法律责任。
