封装好的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的信息位置或者chrome之后的长度发生改变就容易出现问题,但目前来看是可以的。

现在因为手机UC浏览器经常屏蔽百度的广告,但对google广告不屏蔽,我们可以加入判断是否为UC浏览器,不是就显示百度广告,是就显示google的广告

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

其实具体的浏览器的一些特殊的操作可以通过

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