DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript基礎知識 >> javascript 學習筆記(六)浏覽器類型及版本信息檢測代碼
javascript 學習筆記(六)浏覽器類型及版本信息檢測代碼
編輯:JavaScript基礎知識     
下面的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
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved