前端识别特定浏览器最佳实践 - 文章教程

前端识别特定浏览器最佳实践

发布于 2020-03-15 字数 2229 浏览 1347 评论 0

来源:https://github.com/hotoo/detector/issues/18

有时候在模块中需要针对某个特定浏览器进行识别,可以不需要、或不希望依赖 detector 进行识别(例如 sticky 只需要识别 IE6),这里提供一些最佳实践,供需要时参考。

基本原则

  1. 尽量针对特定功能使用正确的特性识别。
  2. 浏览器识别尽量使用 userAgent 信息。
  3. 不要使用不相干的特性检测。例如 isIE6 = !window.XMLHttpRequest;

最佳实践

针对 IE 或 IE 内核浏览器的代码兼容性支持:

// 单个浏览器识别:
var isIE6 = navigator.userAgent.indexOf("MSIE 6.0") !== -1;
var isIE7 = navigator.userAgent.indexOf("MSIE 7.0") !== -1;
var isIE8 = navigator.userAgent.indexOf("MSIE 8.0") !== -1;
var isIE9 = navigator.userAgent.indexOf("MSIE 9.0") !== -1;
var isIE10 = navigator.userAgent.indexOf("MSIE 10.0") !== -1;
//!var isIE11 = navigator.userAgent.indexOf("IE 11.0") !== -1;
var isIE11 = /\btrident\/[0-9].*rv[ :]11\.0/.test(navigator.userAgent);

// 多个浏览器识别
var isIE678 = /\bMSIE [678]\.0\b/.test(navigator.userAgent);

针对真实浏览器版本识别,可用于浏览器升级提示,但是为了避免将 IE 内核的浏览器识别为 IE,建议使用 detector:

function IEMode(){
  var ua = navigator.userAgent.toLowerCase();
  var re_trident = /\btrident\/([0-9.]+)/;
  var re_msie = /\b(?:msie |ie |trident\/[0-9].*rv[ :])([0-9.]+)/;
  var version;

  if(!re_msie.test(ua)){return false;}

  var m = re_trident.exec(ua);
  if(m){
    version = m[1].split(".");
    version[0] = parseInt(version[0], 10) + 4;
    version = version.join(".");
  }else{
    m = re_msie.exec(ua);
    version = m[1];
  }
  return parseFloat(version);
}


var ie = IEMode();
if(ie && ie < 8){
  // 你的浏览器太老了。
}

var isIE6 = navigator.userAgent.indexOf("MSIE 6.0") !== -1;
var isIE7 = IEMode() == 7;
var isIE8 = navigator.userAgent.indexOf("Trident 4.0") !== -1;
var isIE9 = navigator.userAgent.indexOf("Trident 5.0") !== -1;
var isIE10 = navigator.userAgent.indexOf("Trident 6.0") !== -1;
var isIE11 = navigator.userAgent.indexOf("Trident 7.0") !== -1;

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

Jay

文章 0 评论 0

guowei007

文章 0 评论 0

2668157715

文章 0 评论 0

HY阳

文章 0 评论 0

想挽留

文章 30 评论 3