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 相关文章推荐
Extjs学习笔记之五 一个小细节renderTo和applyTo的区别
Jan 07 Javascript
jquery增加时编辑jqGrid(实例代码)
Nov 08 Javascript
JQuery EasyUI 加载两次url的原因分析及解决方案
Aug 18 Javascript
Javscript调用iframe框架页面中函数的方法
Nov 01 Javascript
jQuery中Ajax的load方法详解
Jan 14 Javascript
JavaScript中的acos()方法使用详解
Jun 14 Javascript
AngularJS优雅的自定义指令
Jul 01 Javascript
AngularJS 视图详解及示例代码
Aug 17 Javascript
jQuery设计思想
Mar 07 Javascript
详解angular分页插件tm.pagination二次触发问题解决方案
Jul 20 Javascript
js实现窗口全屏示例详解
Sep 17 Javascript
JavaScript 去重和重复次数统计
Mar 31 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实现提取一个图像文件并在浏览器上显示的代码
2012/10/06 PHP
php中的PHP_EOL换行符详细解析
2013/10/26 PHP
PHP实现的英文名字全拼随机排号脚本
2014/07/04 PHP
PHPUnit安装及使用示例
2014/10/29 PHP
PHP编程中的__clone()方法使用详解
2015/11/27 PHP
PHP登录验证功能示例【用户名、密码、验证码、数据库、已登陆验证、自动登录和注销登录等】
2019/02/25 PHP
ThinkPHP3.2框架自带分页功能实现方法示例
2019/05/13 PHP
js Flash插入函数免激活代码
2009/03/31 Javascript
关于IE、Firefox、Opera页面呈现异同 写脚本很痛苦
2009/08/28 Javascript
一段批量给页面上的控件赋值js
2010/06/19 Javascript
jquery实用代码片段集合
2010/08/12 Javascript
jquery text()方法取标签中的文本
2014/07/25 Javascript
nodejs调用cmd命令实现复制目录
2015/05/04 NodeJs
修复jQuery tablesorter无法正确排序的bug(加千分位数字后)
2016/03/30 Javascript
jQuery操作iframe中js函数的方法小结
2016/07/06 Javascript
AngularJS equal比较对象实例详解
2016/09/14 Javascript
Vue生命周期示例详解
2017/04/12 Javascript
ES6中Math对象新增的方法实例详解
2017/04/25 Javascript
使用vue的v-for生成table并给table加上序号的实例代码
2017/10/27 Javascript
JQuery实现ajax请求的示例和注意事项
2018/12/10 jQuery
Element Cascader 级联选择器的使用示例
2020/07/27 Javascript
sublime python3 输入换行不结束的方法
2018/04/19 Python
python matplotlib库绘制条形图练习题
2019/08/10 Python
PyTorch预训练的实现
2019/09/18 Python
如何用Python和JS实现的Web SSH工具
2021/02/23 Python
投资合作协议书
2014/04/17 职场文书
法院信息化建设方案
2014/05/21 职场文书
结对共建工作方案
2014/06/02 职场文书
论群众路线学习笔记
2014/11/06 职场文书
任命通知范文
2015/04/21 职场文书
2015年初中教师个人工作总结
2015/07/21 职场文书
新学期开学寄语2016
2015/12/04 职场文书
2016党员干部廉洁自律心得体会
2016/01/13 职场文书
思想品德课教学反思
2016/02/24 职场文书
JavaScript展开运算符和剩余运算符的区别详解
2022/02/18 Javascript
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
2022/04/24 Vue.js