javascript 学习笔记(六)浏览器类型及版本信息检测代码


Posted in Javascript onApril 08, 2011

下面的checkBrowser()函数主要检测了三种浏览器(IE, firefox, chrome),其它的浏览器的检测有兴趣的朋友可以自行添加检测代码!
HTML部分代码: (页面加载时执行检测函数)

<body onload="checkBrowser()"> 
<p id="userAgent"></p> 
<p id="browser"></p> 
</body>

javascript部分代码:
检测的原理主要根据 浏览器的用户代理报头nanigator.userAgent中提取到浏览器和类型及版本信息,利用正则表达式可以很容易的满足我们的需求,如对正则表达式不熟悉,可参照此文(正则表达式)
function check(reg) { 
var ug = navigator.userAgent.toLowerCase(); 
return reg.test(ug); 
} 
function checkBrowser() { 
var ug = navigator.userAgent.toLowerCase(); 
var userAgent = document.getElementById("userAgent"); 
userAgent.innerHTML = "浏览器的用户代理报头:" + ug; 
var browserType = ""; 
var ver = ""; 
//检测IE及版本 
var IE = ug.match(/msie\s*\d\.\d/); //提取浏览器类型及版本信息,注match()方法返回的是数组而不是字符串 
var isIE = check(/msie/); 
if(isIE) { 
browserType = "Internet Explorer"; 
ver = IE.join(" ").match(/[0-9]/g).join("."); //先用join()方法转化为字符串,然后用match()方法匹配到版本信息,再用join()方法转化为字符串 
} 
//检测chrome及版本 
var chrome = ug.match(/chrome\/\d\.\d/gi); 
var isChrome = check(/chrome/); 
if(isChrome) { 
browserType = "Chrome"; 
ver = chrome.join(" ").match(/[0-9]/g).join("."); 
} 
//检测firefox及版本 
var firefox = ug.match(/firefox\/\d\.\d/gi); 
var isFirefox = check(/firefox/); 
if(isFirefox) { 
browserType = "Firefox"; 
ver = firefox.join(" ").match(/[0-9]/g).join("."); 
} 
var browser = document.getElementById("browser"); 
browser.innerHTML = "您正在使用的浏览器为:" + browserType + "<span style='padding-left:15px;'>版本为:</span>" + ver; 
}

PS:各浏览器的用户代理信息如下:
 
IE:Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.3; BOIE9;ZHCN);
firefox:Mozilla/5.0 (Windows NT 6.1; rv:2.0) Gecko/20100101 Firefox/4.0;
chrome:Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US) AppleWebKit/534.13 (KHTML, like Gecko) Chrome/9.0.597.98 Safari/534.13
Javascript 相关文章推荐
非常有用的40款jQuery 插件推荐(系列二)
Dec 25 Javascript
textarea焦点的用法实现获取焦点清空失去焦点提示效果
May 19 Javascript
深入理解JavaScript系列(40):设计模式之组合模式详解
Mar 04 Javascript
JavaScript设置表单上传时文件个数的方法
Aug 11 Javascript
Jquery实现遮罩层的简单实例(就是弹出DIV周围都灰色不能操作)
Jul 14 Javascript
JavaScript中document.referrer的用法详解
Jul 04 Javascript
Vue.js devtool插件安装后无法使用的解决办法
Nov 27 Javascript
AngularJS基于MVC的复杂操作实例讲解
Dec 31 Javascript
JavaScript实现邮箱后缀提示功能的示例代码
Dec 13 Javascript
JS插件amCharts实现绘制柱形图默认显示数值功能示例
Nov 26 Javascript
vue 查看dist文件里的结构(多种方式)
Jan 17 Javascript
vue实现移动端拖动排序
Aug 21 Javascript
javascript学习笔记(五)正则表达式
Apr 08 #Javascript
javascript学习笔记(三)显示当时时间的代码
Apr 08 #Javascript
javascript 学习笔记(一)DOM基本操作
Apr 08 #Javascript
jQuery 名称冲突的解决方法
Apr 08 #Javascript
js 事件处理函数间的Event物件是否全等
Apr 08 #Javascript
Javascript 八进制转义字符(8进制)
Apr 08 #Javascript
JavaScript中判断函数是new还是()调用的区别说明
Apr 07 #Javascript
You might like
PHP 创建文件(文件夹)以及目录操作代码
2010/03/04 PHP
php数组操作之键名比较与差集、交集赋值的方法
2014/11/10 PHP
juqery 学习之三 选择器 层级 基本
2010/11/25 Javascript
13 个JavaScript 性能提升技巧分享
2012/07/26 Javascript
Jquery实现带动画效果的经典二级导航菜单
2013/03/22 Javascript
你的 mixin 真的兼容 ECMAScript 5 吗?
2013/04/11 Javascript
JS取文本框中最小值的简单实例
2013/11/29 Javascript
javascript 通用loading动画效果实例代码
2014/01/14 Javascript
JavaScript数值千分位格式化的两种简单实现方法
2016/08/01 Javascript
node.js实现博客小爬虫的实例代码
2016/10/08 Javascript
详解vue嵌套路由-query传递参数
2017/05/23 Javascript
AngularJs+Bootstrap实现漂亮的计算器
2017/08/10 Javascript
前端MVVM框架解析之双向绑定
2018/01/24 Javascript
vue click.stop阻止点击事件继续传播的方法
2018/09/04 Javascript
Vue.js 事件修饰符的使用教程
2018/11/01 Javascript
详解js创建对象的几种方法及继承
2019/04/12 Javascript
Javascript异步执行不按顺序解决方案
2020/04/30 Javascript
vue-列表下详情的展开与折叠案例
2020/07/28 Javascript
maptalks+three.js+vue webpack实现二维地图上贴三维模型操作
2020/08/10 Javascript
python 获取页面表格数据存放到csv中的方法
2018/12/26 Python
numpy库与pandas库axis=0,axis= 1轴的用法详解
2019/05/27 Python
对django layer弹窗组件的使用详解
2019/08/31 Python
Python实现基于socket的udp传输与接收功能详解
2019/11/15 Python
matplotlib事件处理基础(事件绑定、事件属性)
2021/02/03 Python
Lookfantastic葡萄牙官方网站:欧洲第一大化妆品零售商
2018/03/17 全球购物
德国家用电器购物网站:Premiumshop24
2019/08/22 全球购物
学校食堂采购员岗位职责
2013/12/05 职场文书
十佳美德少年事迹材料
2014/02/05 职场文书
2014年党务公开实施方案
2014/02/27 职场文书
毕业生应聘求职信
2014/07/10 职场文书
森马旗舰店双十一营销方案
2014/09/29 职场文书
先进基层党组织事迹材料
2014/12/25 职场文书
表扬稿范文
2015/01/17 职场文书
使用redis生成唯一编号及原理示例详解
2021/09/15 Redis
Android Flutter实现3D动画效果示例详解
2022/04/07 Java/Android
为自由献出你的心脏!「进击的巨人展 FINAL」2022年6月在台开展
2022/04/13 日漫