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脚本性能优化注意事项
Nov 18 Javascript
Jquery进度条插件 Progress Bar小问题解决
Jul 12 Javascript
jQuery拖动布局其结果保存到数据库
Oct 09 Javascript
[原创]Bootstrap 中下拉菜单修改成鼠标悬停直接显示
Apr 14 Javascript
JS对象是否拥有某属性如何判断
Feb 03 Javascript
Angular2 组件通信的实例代码
Jun 23 Javascript
JS实现的走迷宫小游戏完整实例
Jul 19 Javascript
9种使用Chrome Firefox 自带调试工具调试javascript技巧
Dec 22 Javascript
JS实现全屏预览F11功能的示例代码
Jul 23 Javascript
vue+elementui 对话框取消 表单验证重置示例
Oct 29 Javascript
webpack优化之代码分割与公共代码提取详解
Nov 22 Javascript
多个Vue项目部署到服务器的步骤记录
Oct 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和html混合代码的小技巧(分享)
2016/11/03 PHP
2017年最新PHP经典面试题目汇总(上篇)
2017/03/17 PHP
java script编程起步(第三课)
2007/01/10 Javascript
非常棒的10款jQuery 幻灯片插件
2011/06/14 Javascript
通过AJAX的JS、JQuery两种方式解析XML示例介绍
2013/09/23 Javascript
IE与FF下javascript获取网页及窗口大小的区别详解
2014/01/14 Javascript
php的文件上传入门教程(实例讲解)
2014/04/10 Javascript
jquery插件unobtrusive实现片段式加载
2015/06/15 Javascript
jQuery使用serialize()表单序列化时出现中文乱码问题的解决办法
2016/07/27 Javascript
Javascript中作用域的详细介绍
2016/10/06 Javascript
js实现右键菜单功能
2016/11/28 Javascript
JavaScrpt判断一个数是否是质数的实例代码
2017/06/11 Javascript
微信小程序实现action-sheet弹出底部菜单功能【附源码下载】
2017/12/09 Javascript
微信小程序实现的动态设置导航栏标题功能示例
2019/01/31 Javascript
配置一个vue3.0项目的完整步骤
2019/04/26 Javascript
原生JS实现相邻月份日历
2020/10/13 Javascript
Python编程中的for循环语句学习教程
2015/10/14 Python
浅谈python抛出异常、自定义异常, 传递异常
2016/06/20 Python
python 文件操作删除某行的实例
2017/09/04 Python
python中计算一个列表中连续相同的元素个数方法
2018/06/29 Python
python GUI库图形界面开发之PyQt5日期时间控件QDateTimeEdit详细使用方法与实例
2020/02/27 Python
Python爬虫爬取、解析数据操作示例
2020/03/27 Python
Python 实现劳拉游戏的实例代码(四连环、重力四子棋)
2021/03/03 Python
单身旅行者的单身假期:Just You
2018/04/08 全球购物
Currentbody法国:健康与美容高科技产品
2020/08/16 全球购物
财务管理专业推荐信
2013/11/19 职场文书
英文商务邀请信
2014/01/22 职场文书
毕业生如何写自我鉴定
2014/03/15 职场文书
《第一朵杏花》教学反思
2014/04/16 职场文书
学校学雷锋活动总结
2014/06/26 职场文书
党员对十八届四中全会的期盼思想汇报范文
2014/10/17 职场文书
教师考核鉴定意见
2015/06/05 职场文书
社区服务理念口号
2015/12/25 职场文书
漫画「狩龙人拉格纳」公开TV动画预告图
2022/03/22 日漫
Golang 1.18 多模块Multi-Module工作区模式的新特性
2022/04/11 Golang
前端canvas中物体边框和控制点的实现示例
2022/08/05 Javascript