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 相关文章推荐
基于Jquery的简单图片切换效果
Jan 06 Javascript
使用jquery mobile做幻灯播放效果实现步骤
Jan 04 Javascript
javascript文件中引用依赖的js文件的方法
Mar 17 Javascript
你所不了解的javascript操作DOM的细节知识点(一)
Jun 17 Javascript
学习javascript面向对象 javascript实现继承的方式
Jan 04 Javascript
JavaScript iframe数据共享接口实现方法
Jan 06 Javascript
JavaScript模拟数组合并concat
Mar 06 Javascript
微信小程序实现表单校验功能
Mar 30 Javascript
JS实现的tab页切换效果完整示例
Dec 18 Javascript
Vue中多个元素、组件的过渡及列表过渡的方法示例
Feb 13 Javascript
使用express获取微信小程序二维码小记
May 21 Javascript
微信小程序中data-key属性之数据传输(经验总结)
Aug 22 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之第二天
2006/10/09 PHP
thinkphp浏览历史功能实现方法
2014/10/29 PHP
php递归调用删除数组空值元素的方法
2015/04/28 PHP
PHP会话操作之cookie用法分析
2016/09/28 PHP
Laravel 实现添加多语言提示信息
2019/10/25 PHP
ppk谈JavaScript style属性
2008/10/10 Javascript
YUI的Tab切换实现代码
2010/04/11 Javascript
10个基于jQuery或JavaScript的WYSIWYG 编辑器整理
2010/05/06 Javascript
jQuery下通过$.browser来判断浏览器.
2011/04/05 Javascript
JavaScript中的几个关键概念的理解-原型链的构建
2011/05/12 Javascript
JS this作用域以及GET传输值过长的问题解决方法
2013/08/06 Javascript
Jquery给基本控件的取值、赋值示例
2014/05/23 Javascript
JavaScript开发人员的10个关键习惯小结
2014/12/05 Javascript
jQuery的context属性用法实例
2014/12/27 Javascript
纯javascript代码实现计算器功能(三种方法)
2015/09/07 Javascript
JavaScript入门系列之知识点总结
2016/03/24 Javascript
vuejs2.0运用原生js实现简单的拖拽元素功能示例
2017/02/24 Javascript
js登录滑动验证的实现(不滑动无法登陆)
2018/01/03 Javascript
在vue 中使用 less的教程详解
2018/09/26 Javascript
微信小程序开发问题之wx.previewImage
2018/12/25 Javascript
vue踩坑记录之数组定义和赋值问题
2019/03/20 Javascript
vuex入门最详细整理
2020/03/04 Javascript
python中enumerate函数遍历元素用法分析
2016/03/11 Python
Python多进程multiprocessing用法实例分析
2017/08/18 Python
对python中数据集划分函数StratifiedShuffleSplit的使用详解
2018/12/11 Python
Python参数类型以及常见的坑详解
2019/07/08 Python
基于python plotly交互式图表大全
2019/12/07 Python
使用sklearn的cross_val_score进行交叉验证实例
2020/02/28 Python
python和JavaScript哪个容易上手
2020/06/23 Python
应用艺术专业个人的自我评价
2014/01/03 职场文书
护士的自我鉴定
2014/02/07 职场文书
运动会入场式解说词
2014/02/18 职场文书
无锡灵山大佛导游词
2015/02/09 职场文书
学生逃课万能检讨书2000字
2015/02/17 职场文书
Nginx+SpringBoot实现负载均衡的示例
2021/03/31 Servers
python APScheduler执行定时任务介绍
2022/04/19 Python