封装好的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 相关文章推荐
将HTML格式的String转化为HTMLElement的实现方法
Aug 07 Javascript
详解JavaScript对象和数组
Dec 03 Javascript
node.js从数据库获取数据
May 08 Javascript
jquery获取所有选中的checkbox实现代码
May 26 Javascript
AngularJS ngModel实现指令与输入直接的数据通信
Sep 21 Javascript
Bootstrap进度条实现代码解析
Mar 07 Javascript
JavaScript编写一个贪吃蛇游戏
Mar 09 Javascript
使用jQuery实现动态添加小广告
Jul 11 jQuery
基于JavaScript中字符串的match与replace方法(详解)
Dec 04 Javascript
react+ant design实现Table的增、删、改的示例代码
Dec 27 Javascript
JS轮播图的实现方法2
Aug 25 Javascript
node.js如何自定义实现一个EventEmitter
Jul 16 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
一个可以找出源代码中所有中文的工具
2006/10/25 PHP
人尽可用的Windows技巧小贴士之下篇
2007/03/22 PHP
一个图形显示IP的PHP程序代码
2007/10/19 PHP
php Notice: Undefined index 错误提示解决方法
2010/08/29 PHP
PHP __autoload函数(自动载入类文件)的使用方法
2012/02/04 PHP
Codeigniter实现智能裁剪图片的方法
2014/06/12 PHP
Yii2 中实现单点登录的方法
2018/03/09 PHP
基于jQuery的简单的列表导航菜单
2011/03/02 Javascript
js中reverse函数的用法详解
2013/12/26 Javascript
JS判断是否长按某一键的方法
2016/03/02 Javascript
JQuery点击事件回到页面顶部效果的实现代码
2016/05/24 Javascript
Node.js连接postgreSQL并进行数据操作
2016/12/18 Javascript
jQuery弹出窗口打开链接的实现代码
2016/12/24 Javascript
js使用html2canvas实现屏幕截取的示例代码
2017/08/28 Javascript
Windows下使用Nodejs运行js的方法
2017/09/02 NodeJs
node-sass安装失败的原因与解决方法
2017/09/04 Javascript
使用vue-cli webpack 快速搭建项目的代码
2018/11/21 Javascript
详解Typescript 内置的模块导入兼容方式
2020/05/31 Javascript
vue 路由meta 设置导航隐藏与显示功能的示例代码
2020/09/04 Javascript
关于vue的列表图片选中打钩操作
2020/09/09 Javascript
使用Python构建Hopfield网络的教程
2015/04/14 Python
Sanic框架蓝图用法实例分析
2018/07/17 Python
Django Rest framework之认证的实现代码
2018/12/17 Python
对Python3 * 和 ** 运算符详解
2019/02/16 Python
python join方法使用详解
2019/07/30 Python
Keras 使用 Lambda层详解
2020/06/10 Python
基于python实现监听Rabbitmq系统日志代码示例
2020/11/28 Python
CSS3属性使网站设计增强同时不消弱可用性
2009/08/29 HTML / CSS
纯css3实现宠物小鸡实例代码
2018/10/08 HTML / CSS
HTML5 Web存储方式的localStorage和sessionStorage进行数据本地存储案例应用
2012/12/09 HTML / CSS
H5新属性audio音频和video视频的控制详解(推荐)
2016/12/09 HTML / CSS
关键字final的用法
2013/10/02 面试题
《争吵》教学反思
2014/02/15 职场文书
电工工作职责范本
2014/02/22 职场文书
《孔子拜师》教学反思
2014/02/24 职场文书
人大调研汇报材料
2014/08/14 职场文书