封装好的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

赞 (0)

相关推荐

  • JavaScript学习笔记之检测客户端类型是（引擎、浏览器、平台、操作系统、移动设备）

    //取得用户代理字符串 并全部小写. var ua = navigator.userAgent.toLowerCase(); document.write(ua); 在上篇文章给大家介绍了基于javascript代码检测访问网页的浏览器呈现引擎.平台.Windows操作系统.移动设备和游戏系统 ,感兴趣的朋友可以点击全文了解详情. 1.识别呈现引擎 引擎主要包含四种:IE.Gecko.WebKit.Opera 2.识别浏览器 主流浏览器包含四种:IE.Chrome.Firefox.Opera 3

  • JS获得浏览器版本和操作系统版本的例子

    于是,我们可以写出下面的代码: 复制代码 代码如下: <script type="text/javascript"> var Sys = {}; var ua = navigator.userAgent.toLowerCase(); var s;  (s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] :  (s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] :  (s

  • JavaScript 检测浏览器和操作系统的脚本

    Web编程中,识别用户的浏览器以及操作系统非常重要.因为它们对HTML和JavaScript的支持程度有所不同.一般应用在系统登陆页面或者首页中. 具体应用如下: 复制代码 代码如下: <html> <head> <title>Login</title> <script type="text/javascript" src="detect.js"></script> <script typ

  • js判断手机浏览器操作系统和微信浏览器的方法

    今天就为大家介绍一下用js判断手机客户端平台及系统平台的方法: <script type="text/javascript"> //手机端判断各个平台浏览器及操作系统平台 function checkPlatform(){ if(/android/i.test(navigator.userAgent)){ document.write("This is Android'browser.");//这是Android平台下浏览器 } if(/(iPhonei

  • JavaScript高级程序设计阅读笔记（十六） javascript检测浏览器和操作系统-detect.js

    检测浏览器的方式 1.对象特征检测法:判断浏览器能力的通用方法.如果更关注浏览器的能力而不在乎它的实际身份,就可以使用这种检测方法.常见的原生Ajax写法中就用这种方法来创建XMLHttpRequest: 复制代码 代码如下: IXHR: function(){ if(window.ActiveXObject){ XHR=new ActiveXObject('Microsoft.XMLHTTP'); }else if(window.XMLHttpRequest){ XHR=new XMLHttp

  • javascript实现获取浏览器版本、操作系统类型

    代码很简洁,功能很实用,这里就不多废话了,直接给大家奉上代码: /** * Created by Administrator on 15-1-12. */ function BroswerUtil() { } BroswerUtil = { //检测浏览器版本 getBrowserVersion: function () { var agent = navigator.userAgent.toLowerCase(); var arr = []; var Browser = ""; va

  • jsp 获取客户端的浏览器和操作系统信息

    string agent = request.getheader("user-agent"); stringtokenizer st = new stringtokenizer(agent,";"); st.nexttoken(); //得到用户的浏览器名 string userbrowser = st.nexttoken(); //得到用户的操作系统名 string useros = st.nexttoken(); 取得本机的信息也可以这样: 操作系统信息 sys

  • 基于javascript代码检测访问网页的浏览器呈现引擎、平台、Windows操作系统、移动设备和游戏系统

    废话不多说了,直接给大家贴js代码了,代码附有注释,感兴趣的朋友一起学习吧. /** * Author: laixiangran. * Created by laixiangran on 2015/12/02. * 检测访问网页的浏览器呈现引擎.平台.Windows操作系统.移动设备和游戏系统 * ******************************************************************** * 各版本浏览器在windows10.0下的用户代理字符串:

  • Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码

    /** * @author hechen */ var gs = { /**获得屏幕宽度**/ ScreenWidth: function () { return window.screen.width; }, /***获得屏幕高度**/ ScreenHeight: function () { return window.screen.height; }, /**获得浏览器***/ Browse: function () { var browser = {}; var userAgent = n

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

    摘要: 对于前端开发我们最重要的工作就是兼容性,系统的兼容性,浏览器的兼容性等等.今天分享一个我在项目中封装的判断操作系统与浏览器的方法. 操作系统: var os = (function() { var UserAgent = navigator.userAgent.toLowerCase(); return { isIpad : /ipad/.test(UserAgent), isIphone : /iphone os/.test(UserAgent), isAndroid : /andro

  • JS判断时间段的实现代码

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <th>交易时间开始:</th> <td><input id="bcconDateBeginDate" name="bcconDateBeginDate" value="2016/06/12 00:00:00" class="easyui-datetimebox" editable="false" style=&

  • js判断屏幕分辨率的代码

    一般我们可以通过下面的代码判断分辨率 复制代码 代码如下: <script language="JavaScript">  <!-- Begin  function redirectPage() {  var wjb51=screen.width;var hjb51=screen.height;alert("经系统检测,你的屏幕分辨率为 " + wjb51+"*"+ hjb51 + "by 我们jb51.net&quo

  • c#判断操作系统位数的示例分享

    在.net 4.5中,判断操作系统不用再写方法去判断了,有直接可以利用的属性了哦,如下所示:Environment.Is64BitProcess 属性.NET Framework 4.5 确定当前进程是否为 64 位进程. 当然如果是用的.net 4.5以前的童鞋也不必担心,同样也可以用以下的方法来实现判断系统位数. 复制代码 代码如下: private string Distinguish64or32System(){try{string addressWidth = String.Empty

  • js焦点文字滚动效果代码分享

    js焦点文字滚动效果代码分享

    本文实例讲述了js焦点文字滚动效果.分享给大家供大家参考.具体如下: 效果描述: 今天推荐的这个又是一个原生的js焦点图效果 默认自动切换,也可以手动切换 javascript代码采用函数式对象编程,也就是javascript编程中的Module模式 基本用法很简单,主要特点有三: 1.模块化,可重用 2.封装了变量和function,和全局的命名空间不接触,不污染全局变量 3.只暴露可用public方法,其他私有方法全部隐藏,确保js相互之间不会冲突 运行效果图:---------------

  • js实现温度计时间样式代码分享

    js实现温度计时间样式代码分享

    这是一款基于js实现温度计时间样式代码,与我们见过的日期显示都不一样,很有创意,分享给大家学习学习 运行效果图:----------------------查看效果----------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的javascript实现温度计时间样式代码如下 <title> 温度计式样的时间 </title> <SCRIPT language=javascript> var cellwidth=10;

  • js游戏人物上下左右跑步效果代码分享

    js游戏人物上下左右跑步效果代码分享

    本文实例讲述了js游戏人物上下左右跑步效果.分享给大家供大家参考.具体如下: js游戏人物上下左右跑步效果是一款jquery ui制作的点击按钮网格布局头像图片动画切换特效.你操控着游戏人物,掌控一切是不是很有意思,感兴趣的小伙伴们可以学习一下 运行效果图:-------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jQuery实现热气球动画背景登录框代码如下 <!DOCTYPE html>

  • js图片轮播特效代码分享

    js图片轮播特效代码分享

    本文实例讲述了js图片轮播特效,分享给大家供大家参考.具体如下: 这是一款基于javascript实现的图片轮播特效代码,有缩略图和标题,可以自定义标题. 运行效果图:                    -------------------查看效果------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的js图片轮播特效代码如下 <head> <meta http-equiv="Content-Type" co

  • 原生js实现省市区三级联动代码分享

    前言 插件功能只满足我司业务需求,如果希望有更多功能的,可在下方留言,我尽量扩展!如果你有需要或者喜欢的话,可以给我github来个star 准备 <div id="wrap"></div> 页面中的容器标签不限制,只需给个id就行 var address = new Address({ wrapId: 'wrap', showArr: ['provinces','citys','areas'], beforeCreat:function(){ console.

  • js判断在哪个浏览器打开项目的方法

    通过以下方法判断浏览器 var browser = { versions: function () { var u = navigator.userAgent, app = navigator.appVersion; return { //移动终端浏览器版本信息 trident:u.indexOf('Trident') > -1, //IE内核 presto: u.indexOf('Presto') > -1, //opera内核 webKit: u.indexOf('AppleWebKit'

随机推荐