不同浏览器对程序的解释是有差异的,我们在做前端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>