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 相关文章推荐
javascript基础知识大全 便于大家学习,也便于我自己查看
Aug 17 Javascript
jquery延迟加载外部js实现代码
Jan 11 Javascript
Select标签下拉列表二级联动级联实例代码
Feb 07 Javascript
js常用数组操作方法简明总结
Jun 20 Javascript
JavaScript中匿名、命名函数的性能测试
Sep 04 Javascript
jQuery中extend()和fn.extend()方法详解
Jun 03 Javascript
详解JavaScript正则表达式之分组匹配及反向引用
Mar 09 Javascript
轮播图组件js代码
Aug 08 Javascript
谈谈JavaScript中浏览器兼容问题的写法小议
Dec 17 Javascript
浅谈React + Webpack 构建打包优化
Jan 23 Javascript
echarts鼠标覆盖高亮显示节点及关系名称详解
Mar 17 Javascript
vue项目中引入vue-datepicker插件的详解
May 14 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 serialize()与unserialize()的用法
2013/06/05 PHP
php防止恶意刷新与刷票的方法
2014/11/21 PHP
如何利用http协议发布博客园博文评论
2015/08/03 PHP
php array_key_exists() 与 isset() 的区别
2016/10/24 PHP
PHP获取数组中单列值的方法
2017/06/10 PHP
js客户端快捷键管理类的较完整实现和应用
2010/06/08 Javascript
zeroclipboard 单个复制按钮和多个复制按钮的实现方法
2014/06/14 Javascript
node.js中的buffer.fill方法使用说明
2014/12/14 Javascript
jQuery实现的向下图文信息滚动效果
2015/05/03 Javascript
基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用
2016/05/12 Javascript
基于JavaScript实现活动倒计时效果
2017/04/20 Javascript
vue.js中父组件调用子组件的内部方法示例
2017/10/22 Javascript
Webpack 4.x搭建react开发环境的方法步骤
2018/08/15 Javascript
JS实现的对象去重功能示例
2019/06/04 Javascript
JQuery样式与属性设置方法分析
2019/12/07 jQuery
[08:40]Navi Vs Newbee
2018/06/07 DOTA
[57:36]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第三场 2月1日
2021/03/11 DOTA
更改Ubuntu默认python版本的两种方法python-&gt; Anaconda
2016/12/18 Python
你应该知道的python列表去重方法
2017/01/17 Python
Python基于Tkinter模块实现的弹球小游戏
2018/12/27 Python
python处理“
2019/06/10 Python
python将字符串转换成json的方法小结
2019/07/09 Python
python中列表的切片与修改知识点总结
2019/07/23 Python
解决Python二维数组赋值问题
2019/11/28 Python
Python:二维列表下标互换方式(矩阵转置)
2019/12/02 Python
Python数据持久化存储实现方法分析
2019/12/21 Python
css3一个简易的 LED 数字时钟实现方法
2020/01/15 HTML / CSS
台湾最大银发乐活百货:乐龄网
2018/05/21 全球购物
Converse匡威法国官网:美国著名帆布鞋品牌
2018/12/05 全球购物
一套软件测试笔试题
2014/07/25 面试题
水利学院求职自荐书
2014/02/01 职场文书
应届大专生自荐书
2014/06/16 职场文书
2015年护士节慰问信
2015/03/23 职场文书
停课通知书
2015/04/24 职场文书
魂断蓝桥观后感
2015/06/10 职场文书
会议室使用管理制度
2015/08/06 职场文书