javascript如何检测浏览器类型及版本信息

不同浏览器对程序的解释是有差异的,我们在做前端web开发时,一般需要先检测浏览器的类型及版本,然后会对各自的差异性来写代码!
下面的checkBrowser()函数主要检测了三种浏览器(IE, firefox,chrome),其它的浏览器的检测有兴趣的朋友可以自行添加检测代码!
HTML部分代码: (页面加载时执行检测函数)
<body οnlοad="checkBrowser()">
 <pid="userAgent"></p>
 <pid="browser"></p>
</body>
javascript部分代码:
检测的原理主要根据 浏览器的用户代理报头nanigator.userAgent中提取到浏览器和类型及版本信息,利用正则表达式可以很容易的满足我们的需求,如对正则表达式不熟悉,可参照此文《一起学习javascript(四):正则表达式
 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.getElementByIdx_x_x("browser");
  browser.innerHTML ="您正在使用的浏览器为:" + browserType + "<spanstyle='padding-left:15px;'>版本为:</span>"+ ver;
 }


PS:各浏览器的用户代理信息如下:
IE:Mozilla/5.0 (compatible; MSIE 9.0; WindowsNT 6.1; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR3.0.30729; Media Center PC 6.0; InfoPath.3; BOIE9;ZHCN);
firefox:Mozilla/5.0 (Windows NT 6.1; rv:2.0) Gecko/20100101Firefox/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


转自:http://www.jzxue.com/wangzhankaifa/javascript-ajax/201104/10-7073.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值