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 相关文章推荐
Dom操作之兼容技巧分享
Sep 20 Javascript
JQuery中如何传递参数如click(),change()等具体实现
Apr 28 Javascript
简单选项卡 js和jquery制作方法分享
Feb 26 Javascript
jQuery实现多按钮单击变色
Nov 27 Javascript
移动端使用localStorage缓存Js和css文的方法(web开发)
Sep 20 Javascript
Servlet实现文件上传,可多文件上传示例
Dec 05 Javascript
微信小程序之MaterialDesign--input组件详解
Feb 15 Javascript
使用Node.js实现简易MVC框架的方法
Aug 07 Javascript
详解ES6之async+await 同步/异步方案
Sep 19 Javascript
Vue2.0 事件的广播与接收(观察者模式)
Mar 14 Javascript
使用Angular自定义字段校验指令的方法示例
Feb 01 Javascript
JS实现炫酷轮播图
Nov 15 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
MySQL GBK→UTF-8编码转换
2007/05/24 PHP
解析在PHP中使用mysqli扩展库对mysql的操作
2013/07/03 PHP
php json相关函数用法示例
2017/03/28 PHP
php反序列化长度变化尾部字符串逃逸(0CTF-2016-piapiapia)
2020/02/15 PHP
Javascript中的常见排序算法
2007/03/27 Javascript
js左右弹性滚动对联广告代码分享
2014/02/19 Javascript
js获取checkbox复选框选中的选项实例
2014/08/24 Javascript
JQuery 使用attr方法实现下拉列表选中
2014/10/13 Javascript
javascript实现带下拉子菜单的导航菜单效果
2015/05/14 Javascript
使用nodejs开发cli项目实例
2015/06/03 NodeJs
JavaScript实现打字效果的方法
2015/07/10 Javascript
JS+CSS实现美化的下拉列表框效果
2015/08/11 Javascript
JavaScript生成二维码图片小结
2015/12/27 Javascript
node.js中module.exports与exports用法上的区别
2016/09/02 Javascript
运用jQuery写的验证表单(实例讲解)
2017/07/06 jQuery
element-ui 限制日期选择的方法(datepicker)
2018/05/16 Javascript
JS伪继承prototype实现方法示例
2018/06/20 Javascript
no-vnc和node.js实现web远程桌面的完整步骤
2019/08/11 Javascript
使用layui前端框架弹出form表单以及提交的示例
2019/10/25 Javascript
js最全的数组的降维5种办法(小结)
2020/04/28 Javascript
jQuery 添加元素和删除元素的方法
2020/07/15 jQuery
nuxt 页面路由配置,主页轮播组件开发操作
2020/11/05 Javascript
Python的面向对象思想分析
2015/01/14 Python
Django中的“惰性翻译”方法的相关使用
2015/07/27 Python
Python中urllib+urllib2+cookielib模块编写爬虫实战
2016/01/20 Python
python3下载抖音视频的完整代码
2019/06/05 Python
十行代码使用Python写一个USB病毒
2019/06/21 Python
浅析Python数字类型和字符串类型的内置方法
2019/12/22 Python
python seaborn heatmap可视化相关性矩阵实例
2020/06/03 Python
python 实现压缩和解压缩的示例
2020/09/22 Python
paramiko使用tail实时获取服务器的日志输出详解
2020/12/06 Python
Michael Kors澳大利亚官网:世界知名的奢侈饰品和成衣设计师
2020/02/13 全球购物
2016学习雷锋精神活动倡议书
2015/04/27 职场文书
幼儿园2016圣诞节活动总结
2016/03/31 职场文书
Java由浅入深通关抽象类与接口(下篇)
2022/04/26 Java/Android
windows server2012 R2下安装PaddleOCR服务的的详细步骤
2022/09/23 Servers