封装好的js判断操作系统与浏览器代码分享

前端兼容性与系统浏览器判断方法

在前端开发中，确保系统兼容性和浏览器兼容性是核心工作之一。本文介绍一种在项目中封装好的、用于判断操作系统与浏览器的方法。

关于操作系统的判断：

var os = (function() {
  var UserAgent = navigator.userAgent.toLowerCase();
  return {
    isIpad     : /ipad/.test(UserAgent),
    isIphone    : /iphone os/.test(UserAgent),
    isAndroid    : /android/.test(UserAgent),
    isWindowsCe   : /windows ce/.test(UserAgent),
    isWindowsMobile : /windows mobile/.test(UserAgent),
    isWin2K     : /windows nt 5.0/.test(UserAgent),
    isXP      : /windows nt 5.1/.test(UserAgent),
    isVista     : /windows nt 6.0/.test(UserAgent),
    isWin7     : /windows nt 6.1/.test(UserAgent),
    isWin8     : /windows nt 6.2/.test(UserAgent),
    isWin81     : /windows nt 6.3/.test(UserAgent)
  };
}());

若需判断设备是否为iPad，可直接检查条件 if(os.isIpad) {}。

关于浏览器的判断：

var bw = (function() {
  var UserAgent = navigator.userAgent.toLowerCase();
  return {
    isUc   : /ucweb/.test(UserAgent), // UC浏览器
    isChrome : /chrome/.test(UserAgent.substr(-33,6)), // Chrome浏览器
    isFirefox : /firefox/.test(UserAgent), // 火狐浏览器
    isOpera  : /opera/.test(UserAgent), // Opera浏览器
    isSafire : /safari/.test(UserAgent) && !/chrome/.test(UserAgent), // safire浏览器
    is360   : /360se/.test(UserAgent), // 360浏览器
    isBaidu  : /bidubrowser/.test(UserAgent), // 百度浏览器
    isSougou : /metasr/.test(UserAgent), // 搜狗浏览器
    isIE6   : /msie 6.0/.test(UserAgent), // IE6
    isIE7   : /msie 7.0/.test(UserAgent), // IE7
    isIE8   : /msie 8.0/.test(UserAgent), // IE8
    isIE9   : /msie 9.0/.test(UserAgent), // IE9
    isIE10  : /msie 10.0/.test(UserAgent), // IE10
    isIE11  : /msie 11.0/.test(UserAgent), // IE11
    isLB   : /lbbrowser/.test(UserAgent), // 猎豹浏览器
　　　　 isWX   : /micromessenger/.test(UserAgent), // 微信内置浏览器
    isQQ   : /qqbrowser/.test(UserAgent) // QQ浏览器
  };
}());

]

总结：上述浏览器判断逻辑均经过实际测试。其中Chrome浏览器的识别可能存在潜在风险，因为多数浏览器采用WebKit内核，此处通过截取Chrome的navigator信息来进行区分。若未来Chrome的navigator信息格式或长度发生变化，该判断逻辑可能会失效，但当前版本可用。

此外，考虑到手机UC浏览器常屏蔽百度广告而对Google广告不屏蔽的情况，可加入对UC浏览器的判断：若非UC浏览器则展示百度广告，若是则展示Google广告。

if(navigator.userAgent.indexOf('UCBrowser') > -1) {
alert("uc浏览器");
}else｛
//不是uc浏览器执行的操作
｝

具体浏览器的特殊操作可通过以下方式进行：

原生JS获取浏览器信息属性

利用JS获取浏览器相关信息： 浏览器代码名称：navigator.appCodeName 浏览器名称：navigator.appName 浏览器版本号：navigator.appVersion 对Java的支持：navigator.javaEnabled() MIME类型（数组）：navigator.mimeTypes 系统平台：navigator.platform 插件（数组）：navigator.plugins 用户代理：navigator.userAgent