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 相关文章推荐
讲两件事:1.this指针的用法小探. 2.ie的attachEvent和firefox的addEventListener在事件处理上的区别
Apr 12 Javascript
页面实时更新时间的JS实例代码
Dec 18 Javascript
js导出txt示例代码
Jan 14 Javascript
详解Angularjs中的依赖注入
Mar 11 Javascript
Javascript this 函数深入详解
Dec 13 Javascript
Mongoose经常返回e11000 error的原因分析
Mar 29 Javascript
vue 和vue-touch 实现移动端左右导航效果(仿京东移动站导航)
Apr 22 Javascript
深入理解vue $refs的基本用法
Jul 13 Javascript
vue+webpack 打包文件 404 页面空白的解决方法
Feb 28 Javascript
微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解析
Aug 16 Javascript
vuex 实现getter值赋值给vue组件里的data示例
Nov 05 Javascript
JavaScript如何操作css
Oct 24 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实现字符串首字母转换成大写的方法
2015/03/17 PHP
jQuery表单验证插件formValidator(改进版)
2012/02/03 Javascript
等待指定时间后自动跳转或关闭当前页面的js代码
2013/07/09 Javascript
Jquery 的outerHeight方法使用介绍
2013/09/11 Javascript
iframe子页面获取父页面元素的方法
2013/11/05 Javascript
原生js实现fadein 和 fadeout淡入淡出效果
2014/06/05 Javascript
js获取会话框prompt的返回值的方法
2015/01/10 Javascript
AngularJS基础学习笔记之表达式
2015/05/10 Javascript
jQuery实现MSN中文网滑动Tab菜单效果代码
2015/09/09 Javascript
js实现字符串和数组之间相互转换操作
2016/01/12 Javascript
原生js实现轮播图
2017/02/27 Javascript
Javascript 一些需要注意的细节(必看篇)
2017/07/08 Javascript
jQuery ajax调用webservice注意事项
2017/10/08 jQuery
javascript用rem来做响应式开发
2018/01/13 Javascript
vue-cli实现多页面多路由的示例代码
2018/01/30 Javascript
详解小程序原生使用ES7 async/await语法
2018/08/06 Javascript
微信小程序登录态和检验注册过没的app.js写法
2019/05/22 Javascript
微信内置浏览器图片查看器的代码实例
2019/10/08 Javascript
[14:25]教你分分钟做大人:主宰(HEROS)
2014/12/08 DOTA
[08:06]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant 选手采访
2021/03/11 DOTA
使用Python压缩和解压缩zip文件的教程
2015/05/06 Python
Python 正则表达式的高级用法
2016/12/04 Python
python爬虫入门教程--HTML文本的解析库BeautifulSoup(四)
2017/05/25 Python
浅谈Python由__dict__和dir()引发的一些思考
2017/10/30 Python
Sanic框架配置操作分析
2018/07/17 Python
python重要函数eval多种用法解析
2020/01/14 Python
美国新蛋IT数码商城:Newegg.com
2016/07/21 全球购物
日本最大的药妆连锁店:Matsukiyo松本清药妆店
2017/11/23 全球购物
工程现场管理求职自荐信
2013/10/02 职场文书
高中生活自我鉴定
2014/01/18 职场文书
会计电算化应届生自荐信
2014/02/25 职场文书
感恩母亲节活动总结
2015/02/10 职场文书
2015社区爱国卫生工作总结
2015/04/21 职场文书
2015暑期社会实践调查报告
2015/07/14 职场文书
详解Go与PHP的语法对比
2021/05/29 PHP
python数据可视化使用pyfinance分析证券收益示例详解
2021/11/20 Python