JS判断IE浏览器及兼容IE11的方法

作者:页面旅途时间:2026-10-29 18:46:09浏览:508

本文介绍如何在JavaScript中准确判断IE浏览器,重点解决IE11及更高版本因UserAgent中移除MSIE标志导致的检测失效问题。通过结合ActiveXObject、Trident内核及Edge标识进行综合判断,并提供完整的版本识别代码。同时阐述了基于浏览器特性优先于UserAgent的检测原则,以确保跨浏览器兼容性。

IE浏览器检测背景与问题

在开发代码复制功能时遇到一个现象:IE11不再支持document.all属性,这表明浏览器标准正在日益统一。

曾遇到一个部署问题:页面在本地VS开发环境中运行正常,但部署到服务器后,即使使用IE打开,仍提示“仅支持IE”。经排查,这是因为开发环境中识别为IE10,而服务器环境识别为IE11。由于IE11的UserAgent字符串中不再包含MSIE标志,导致原有的判断逻辑失效。

兼容IE11的IE判断方法

将判断IE浏览器的逻辑修改为以下代码即可解决该问题。

原有的函数写法已不再适用于新版IE11。


function isIE(){
if (window.navigator.userAgent.indexOf("MSIE")>=1) 
return true; 
else 
return false; 
}

鉴于IE10及以上版本中IE11已不支持document.all,传统的判断方式失效。下面提供兼容IE11的版本,同时也能支持IE6至IE8。


function isIE() { //ie?
 if (!!window.ActiveXObject || "ActiveXObject" in window)
  return true;
  else
  return false;
 }

IE浏览器版本识别代码

判断IE浏览器的具体版本。


function IEVersion() {
      var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串  
      var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE<11浏览器  
      var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //判断是否IE的Edge浏览器  
      var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1;
      if(isIE) {
          var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
          reIE.test(userAgent);
          var fIEVersion = parseFloat(RegExp["$1"]);
          if(fIEVersion == 7) {
              return 7;
          } else if(fIEVersion == 8) {
              return 8;
          } else if(fIEVersion == 9) {
              return 9;
          } else if(fIEVersion == 10) {
              return 10;
          } else {
              return 6;//IE版本<=7
          }   
      } else if(isEdge) {
          return 'edge';//edge
      } else if(isIE11) {
          return 11; //IE11  
      }else{
          return -1;//不是ie浏览器
      }
  }

浏览器内核与特性检测策略

JS通过内核判断各种浏览器|区分360与谷歌(现在不能用了曾经可以用)


function getBrowserInfo(){
        var ua = navigator.userAgent.toLocaleLowerCase();
        var browserType=null;
        if (ua.match(/msie/) != null || ua.match(/trident/) != null) {
            browserType = "IE";
            browserVersion = ua.match(/msie ([\d.]+)/) != null ? ua.match(/msie ([\d.]+)/)[1] : ua.match(/rv:([\d.]+)/)[1];
        } else if (ua.match(/firefox/) != null) {
            browserType = "火狐";
        }else if (ua.match(/ubrowser/) != null) {
            browserType = "UC";
        }else if (ua.match(/opera/) != null) {
            browserType = "欧朋";
        } else if (ua.match(/bidubrowser/) != null) {
            browserType = "百度";
        }else if (ua.match(/metasr/) != null) {
            browserType = "搜狗";
        }else if (ua.match(/tencenttraveler/) != null || ua.match(/qqbrowse/) != null) {
            browserType = "QQ";
        }else if (ua.match(/maxthon/) != null) {
            browserType = "遨游";
        }else if (ua.match(/chrome/) != null) {
            var is360 = _mime("type", "application/vnd.chromium.remoting-viewer");
            function _mime(option, value) {
                var mimeTypes = navigator.mimeTypes;
                for (var mt in mimeTypes) {
                    if (mimeTypes[mt][option] == value) {
                        return true;
                    }
                }
                return false;
            }
            if(is360){
                browserType = '360';
            }else{
                $('html').css("zoom",".80");
            }
        }else if (ua.match(/safari/) != null) {
            browserType = "Safari";
        }
}

原生Chrome中存在一种MimeType“application/vnd.chromium.remoting-viewer”,可用于区分加壳Chrome与原生Chrome。此外,只有IE内核的浏览器存在ActiveXObject对象,利用这一点可以判断是否为IE浏览器。

判断浏览器类型应遵循以下原则: 1、采取命中特征原则,当且仅当完全符合区分浏览器的特征时我们才会采用此特征。例如单纯通过UA中MSIE来检测是否为IE浏览器是不可靠的。而通过判断是否存在MimeType“application/vnd.chromium.remoting-viewer”来断言原生Chrome在现阶段来看是可行性,但也不保证永久有效。 2、对于主流浏览器来说一般不存在UserAgent关键字冲突,但对于许多加壳浏览器者就不一定了。再次提出某数字浏览器,userAgent干脆和IE一模一样,但渲染模式等等不不知道动了什么手脚,与标准IE行为差异很大。通过userAgent来判断浏览器时,优先命中浏览器特征字。匹配则基本确定为该浏览器,但未匹配也并不代表不是此浏览器。请悉知。 3、优先使用浏览器特性来区分浏览器,因为这个准确性较高。其次再采用userAgent辅助判断,从而达到最高的匹配度。 4、优先检测第三方加壳浏览器,目前并未有十分好的方案,只能枚举大部分世面上存在并可以判断的浏览器,其他未匹配任何规则的浏览器,为了兼容,请将规则落到四大浏览器之一。 5、判断浏览器版本,仅仅是为了针对特定浏览器进行优化,需要有特定的业务场景需要才要这么做。或者当某个浏览器出现兼容问题时,紧急添加针对浏览器的补丁代码时才判断。更加科学稳妥的办法是使用标准的JS函数和API,页面元素和样式设计遵循W3C标准。可能存在争议的兼容性问题尽可能采用第三方框架如jQuery。这才是解决兼容性问题的根本。

作者最新文章