位置:海鸟网 > IT > JavaScript >

一起学习javascript(五):如何检测浏览器类型及版本信息

不同浏览器对程序的解释是有差异的,我们在做前端web开发时,一般需要先检测浏览器的类型及版本,然后会对各自的差异性来写代码!
下面的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>版本为:</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
27         if(reg.test(email_value)) { 

28             alert("输入的邮箱格式正确"); 

29         } else { 

30             alert("请输入正确的邮箱格式"); 

31             email.focus(); 

32             return false; 

33         } 

34     } 

35 } 

36  

37 function isPhone() {    

38     var phone = document.getElementById("phone"); 

39     var phone_value = phone.value; 

40     if(phone_value == "") { 

41         alert("请输入完整的座机号码"); 

42         phone.focus(); 

43         return false; 

44     } else { 

45         var reg = /^[(]?0\d{2,3}[)]?\s*[-]?\s*\d{7,8}$/; //010-87989898 01098989898 (0712)8989898 010 - 23343434 这些格式的座机号码都满足 

46         if(reg.test(phone_value)) { 

47             alert("输入的座机号码正确"); 

48         } else { 

49             alert("输入的座机号码格式错误"); 

50             phone.focus(); 

51             return false; 

52         } 

53     } 

54 }
 HTML部分代码:

01 <p> 

02     <label for="mobile_phone">手 机</label> 

03     <input type="text" id="mobile_phone", name="mobile_phone" value="15107105287" /> 

04     <input type="button" value="validate" onclick="isMobile()" /> 

05 </p> 

06 <p> 

07     <label for="phone">座 机</label> 

08     <input type="text" id="phone" name="phone" value="027-87767676" /> 

09     <input type="button" value="validate" onclick="isPhone()" /> 

10 </p> 

11 <p> 

12     <label for="email">邮  箱</label> 

13     <input type="" id="email" name="email" value="longchina@Cuoxin.com" /> 

14     <input type="button" value="validate" onclick="isEmail()" /> 

15 </p>