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


Posted in Javascript onJanuary 09, 2015

摘要:

对于前端开发我们最重要的工作就是兼容性,系统的兼容性,浏览器的兼容性等等。今天分享一个我在项目中封装的判断操作系统与浏览器的方法。

操作系统:

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

Javascript 相关文章推荐
7个JS基础知识总结
Mar 05 Javascript
JS简单实现动画弹出层效果
May 05 Javascript
javascript中数组方法汇总
Jul 07 Javascript
JavaScript中的Reflect对象详解(ES6新特性)
Jul 22 Javascript
使用BootStrapValidator完成前端输入验证
Sep 28 Javascript
jQuery的ajax中使用FormData实现页面无刷新上传功能
Jan 16 Javascript
大白话讲解JavaScript的Promise
Apr 06 Javascript
使用Browserify来实现CommonJS的浏览器加载方法
May 14 Javascript
react实现换肤功能的示例代码
Aug 14 Javascript
JavaScript动态创建二维数组的方法示例
Feb 01 Javascript
深入浅出vue图片路径的实现
Sep 04 Javascript
vue递归获取父元素的元素实例
Aug 07 Javascript
JavaScript Math.floor方法(对数值向下取整)
Jan 09 #Javascript
使用javascript实现json数据以csv格式下载
Jan 09 #Javascript
js读取csv文件并使用json显示出来
Jan 09 #Javascript
微信JS接口汇总及使用详解
Jan 09 #Javascript
推荐一款jQuery插件模板
Jan 09 #Javascript
JavaScript中Cookie操作实例
Jan 09 #Javascript
使用javascript实现简单的选项卡切换
Jan 09 #Javascript
You might like
如何利用php+mysql保存和输出文件
2006/10/09 PHP
PHP 输出简单动态WAP页面
2009/06/09 PHP
php学习笔记 PHP面向对象的程序设计
2011/06/13 PHP
Warning: session_destroy() : Trying to destroy uninitialized sessionq错误
2011/06/16 PHP
linux系统下php安装mbstring扩展的二种方法
2014/01/20 PHP
php面向对象之反射功能与用法分析
2017/03/29 PHP
PHP 实现重载
2021/03/09 PHP
js压缩工具 yuicompressor 使用教程
2010/03/31 Javascript
Ajax请求在数据量大的时候出现超时的解决方法
2014/02/27 Javascript
基于jquery实现的文字向上跑动类似跑马灯的效果
2014/06/17 Javascript
jQuery验证元素是否为空的两种常用方法
2015/03/17 Javascript
基于Jquery实现表单验证
2020/07/20 Javascript
Angularjs中使用Filters详解
2016/03/11 Javascript
使用BootStrap和Metroui设计的metro风格微网站或手机app界面
2016/10/21 Javascript
jQuery中select与datalist制作下拉菜单时的区别浅析
2016/12/30 Javascript
jQuery鼠标悬停内容动画切换效果
2017/04/27 jQuery
JavaScript屏蔽Backspace键的实现代码
2017/11/02 Javascript
vue环境搭建简单教程
2017/11/07 Javascript
详解用webpack的CommonsChunkPlugin提取公共代码的3种方式
2017/11/09 Javascript
详解vue.js数据传递以及数据分发slot
2018/01/20 Javascript
vue 监听某个div垂直滚动条下拉到底部的方法
2018/09/15 Javascript
Angular PWA使用的Demo示例
2019/01/31 Javascript
微信小程序实现拖拽功能
2019/09/26 Javascript
Vuex实现简单购物车
2021/01/10 Vue.js
Python 3中的yield from语法详解
2017/01/18 Python
pandas series序列转化为星期几的实例
2018/04/11 Python
在python中使用with打开多个文件的方法
2019/01/07 Python
python3.4 将16进制转成字符串的实例
2019/06/12 Python
python实现按行分割文件
2019/07/22 Python
Python List列表对象内置方法实例详解
2019/10/22 Python
基于TensorFlow常量、序列以及随机值生成实例
2020/01/04 Python
周仰杰(JIMMY CHOO)英国官方网站:闻名世界的鞋子品牌
2018/10/28 全球购物
MATCHESFASHION澳大利亚/亚太地区:英国时尚奢侈品电商
2020/01/14 全球购物
医院护士工作检讨书
2014/10/26 职场文书
《一面五星红旗》教学反思
2016/02/23 职场文书
python requests模块的使用示例
2021/04/07 Python