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 相关文章推荐
Raphael带文本标签可拖动的图形实现代码
Feb 20 Javascript
datagrid框架的删除添加与修改
Apr 08 Javascript
jquery封装的对话框简单实现
Jul 21 Javascript
js将当前时间格式转换成时间搓(自写)
Sep 26 Javascript
Validform+layer实现漂亮的表单验证特效
Jan 17 Javascript
jquery动态遍历Json对象的属性和值的方法
Jul 27 Javascript
js简单时间比较的方法
Aug 02 Javascript
Vue的MVVM实现方法
Aug 16 Javascript
如何理解Vue的render函数的具体用法
Aug 30 Javascript
教你完全理解ReentrantLock重入锁
Jun 03 Javascript
layui 表单标签的校验方法
Sep 04 Javascript
微信小程序里引入SVG矢量图标的方法
Sep 20 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
使用apache模块rewrite_module (转)
2007/02/14 PHP
基于PHP array数组的教程详解
2013/06/05 PHP
解析php入库和出库
2013/06/25 PHP
php实现断点续传大文件示例代码
2020/06/19 PHP
jquery1.4.2 for Visual studio 2010 模板文件
2010/07/14 Javascript
HTML5附件拖拽上传drop &amp; google.gears实现代码
2011/04/28 Javascript
浅谈JavaScript字符集
2014/05/22 Javascript
jQuery实现按钮只点击一次后就取消点击事件绑定的方法
2015/06/26 Javascript
jquery采用oop模式class类的使用示例
2016/01/22 Javascript
jQuery简单实现iframe的高度根据页面内容自适应的方法
2016/08/01 Javascript
详细解读Jquery各Ajax函数($.get(),$.post(),$.ajax(),$.getJSON())
2016/08/15 Javascript
js控住DOM实现发布微博效果
2016/08/30 Javascript
jQuery多选框选择数量限制方法
2017/02/08 Javascript
angularjs实现多张图片上传并预览功能
2017/02/24 Javascript
vue.js 底部导航栏 一级路由显示 子路由不显示的解决方法
2018/03/09 Javascript
vue router 源码概览案例分析
2018/10/09 Javascript
微信小程序实现简单表格
2019/02/14 Javascript
微信小程序 (地址选择1)--选取搜索地点并显示效果
2019/12/17 Javascript
我所理解的JavaScript中的this指向
2020/09/04 Javascript
python使用xlrd模块读写Excel文件的方法
2015/05/06 Python
Python实现中文数字转换为阿拉伯数字的方法示例
2017/05/26 Python
python开发准备工作之配置虚拟环境(非常重要)
2019/02/11 Python
python实现高斯(Gauss)迭代法的例子
2019/11/20 Python
Python爬取微信小程序通用方法代码实例详解
2020/09/29 Python
详解canvas drawImage()方法绘制图片不显示的问题
2018/10/08 HTML / CSS
节省高达65%的城市景点费用:Go City
2019/07/06 全球购物
网络维护管理员的自我评价分享
2013/11/11 职场文书
毕业求职自荐信格式是什么
2013/11/19 职场文书
大学生专科学习生活的自我评价
2013/12/07 职场文书
元旦寄语大全
2014/04/10 职场文书
销售简历自我评价怎么写
2014/09/26 职场文书
情况说明书怎么写
2015/10/08 职场文书
学校2016年圣诞节活动总结
2016/03/31 职场文书
聊一聊python常用的编程模块
2021/05/14 Python
Matplotlib绘制混淆矩阵的实现
2021/05/27 Python
什么是clearfix (一文搞清楚css清除浮动clearfix)
2023/05/21 HTML / CSS