JS怎么判断浏览器类型如何识别IE和火狐浏览器

如何用JS判断浏览器类型是不是IE或火狐浏览器

说到判断浏览器类型，用JS其实有几招非常常见，特别是要分清楚是不是IE或者火狐。咱们最常用的就是通过navigator.userAgent这个只读字符串，来确认浏览器身份。举个例子：

判断是不是IE浏览器，可以写成这样：

var isIE = navigator.userAgent.toUpperCase().indexOf("MSIE") > -1 ? true : false;

判断是不是火狐浏览器：

var isFirefox = navigator.userAgent.toUpperCase().indexOf("FIREFOX") > -1 ? true : false;

这里还得提醒一句哈，userAgent里偶尔会有戏精，比如Opera浏览器，它会伪装成IE，为此咱们会额外用navigator.userAgent.indexOf('Opera') === -1来排除掉它。

还有一个非常有名的判断方式是通过事件监听方法的判断：

window.attachEvent只有在IE浏览器里才存在。
window.addEventListener是现代浏览器的标配，IE老版本不支持。

所以判断IE的条件是：

if(!!window.attachEvent) {
  // 这里就是IE哦
}

反之，如果window.addEventListener存在，那就是非IE的现代浏览器了。

怎样用JS判断IE特别是旧版本以及调用对应的CSS文件

旧版IE浏览器，那真的是有点让人头疼！尤其是IE9以前的版本，很多现代功能根本不支持。我们可以这样来判断它：

判断是否IE6、IE7这类版本：

if(navigator.appName == "Microsoft Internet Explorer") {
  var versionInfo = navigator.appVersion.split(";");
  var version = versionInfo[1].replace(/[ ]/g,"");
  if(version === "MSIE6.0" || version === "MSIE7.0") {
    alert("您使用的IE版本太低哦，建议升级浏览器！");
  }
}

这下就能针对这些老版本给用户一个温馨提示，不然页面可能很糟糕。

关于给不同浏览器加载对应的CSS文件，这个也得巧劲用足哈！特别是IE有自己的条件注释，写法类似：

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie-style.css" />
<![endif]-->

这玩意儿行之有效，而且简单粗暴。其他浏览器会直接把这段视为注释忽略掉，只有IE会解析执行，从而加载专门给它写的CSS样式。

另外，也可以通过JS动态检测浏览器后，调用不同的CSS，比如：

if(isIE){
  // 加载IE专属样式
  var link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = 'ie-style.css';
  document.head.appendChild(link);
} else if(isFirefox){
  // 加载火狐的样式
}

对于更细致的判断，比如判断浏览器是否用“极速模式”或者是Chrome内核，这种就更得看userAgent里是不是包含了“Chrome”或者特定关键词来区分了。
另外一个很有意思的技巧，用JS判断浏览器关闭还是刷新，也蛮实用。虽然onunload和onbeforeunload都可以用来监听关闭事件，但没法完全区分刷新和关闭，代码里通过检测鼠标点击位置和事件对象的小妙招，能大大提升准确度。