转自：
http://blog.sina.com.cn/s/blog_5aeeb8200100apt4.html~type=v5_one&label=rela_nextarticle
检测浏览器和操作系统是个比较繁琐的工作.因为有很多种,而且每种有各种版本.
主要使用navigator对象
检测浏览器的方式主要有两种:
1.对象/特征检查法:
对象检测法是判断浏览器能力的通用方法.大部分javascript 专家认为这个方法最为合适.
if(document.getElementById){
// the method exits, so use here
}
else{
// do something here
}
值得注意的一个地方是:要检查的函数后面不能出现括号!如果加入了括号,解释器就会尝试调用这个函数,如果函数不存在就会产生错误.
如果更关注浏览器的能力而不在乎它实际的身份,就可以使用这种检测方法.贯穿本书,你可以看到有些例子中使用对象检测法,而另一些例子中使用 user-agent 字符串检测法则更为恰当.而此处也就讲讲那种方法.
2.user-agent字符串检测法
它是最古老的浏览器检测方式. javascript在 navigator 对象中引入了 userAgent属性来提供客户端对 user-agent 字符串的访问.
一些常见的浏览器的user-agent 字符串
Internet Explorer 6.0(Window XP) Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1)
Mozilla 1.5(Window XP) Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv;1.5)
Gecko/20031007
Firefox 0.92(Window XP) Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv;1.7)
Gecko/20040707 Firefox/0.8
Opera 7.54(Window XP) Opera/7.54 (Windows NT 5.1; U)
Safari 1.25(MacOS X) Mozilla/5.0 (Macintosh; U; PPC Mac OS X; en)
user-agent 字符串简史
Netscape Navigator 3.0 与 IE 3.0
Netscape Navigator 3.0
它大约在1996年发布的. 这个版本的 Netscape 引擎的开发代号是 Mozilla, user-agent 字符串格式为:
Mozilla/AppVersion (Platform; Security [; OS-or-CPU-Descirption])
如: Mozilla/3.0 (Win95; I)
I:安全性较低 N:没有安全性 U:强128位加密安全性(美国大部分现在的浏览器都有128位安全性)
IE 3.0 user-agent 字符串格式为:
Mozilla/2.0 (compatible; MSIE [IEVersion]; [OS])
如: Mozilla/2.0 (compatible; MSIE 3.02; Windows 95)
确定这个版本是否为3.0:
if(navigator.userAgent.indexOf("MSIE") > -1){
if(navigator.userAgent.indexOf("MSIE 3." > -1){
// do IE 3.0 browser stuff here
}
else if(parseFloat(navigator.appVersion) >= 3){
// do other 3.0 browser stuff here
}
}
Netscape Communicator 4.0 与 IE 4.0
Netscape Communicator 4.0 user-agent 字符串格式为:(保持与原来一样)
Mozilla/AppVersion (Platform; Security [; OS-or-CPU-Descirption])
如: Mozilla/4.0 (Win95; I)
IE 4.0及更高版本 user-agent 字符串格式为:
Mozilla/4.0 (compatible; MSIE [IEVersion]; [OS])
如: Mozilla/4.0 (compatible; MSIE 4.0; Windows 98)
Mozilla/4.0 (compatible; MSIE 4.5; Windows 98)
Mozilla/4.0 (compatible; MSIE 5.0; Windows 98)
Mozilla/4.0 (compatible; MSIE 6.0; Windows 98)
确定这个版本是否为4.0:
if(parseFloat(navigator.appVersion) >= 4){
// do 4.0-level stuff here
}
Mozilla
作为 Netscap (Mozilla)开发的一部分,开发人员规定了新的user-agent 字符串的格式
Mozilla/MozillaVersion (Platform; Security; OS-or-CPU; Localization information
[; PrereleaseVersion]? [;Optional Other Comments]* ) Gecko/GeckoVersion
[ApplicationProduct/ApplicationProductVersion]
一些解释:
Localization information 浏览器使用的语言.典型的是美国使用 en-US
PrereleaseVersion 用于这个浏览器的开放源代码的Mozilla代码的基本版本.注意:这个一直未被使用,直
到 Mozilla 0.9.2(Netscape 6.1)
Optional Other Comments 留给各自的Mozilla实现添加额外信息的空间
Gecko/GeckoVersion 使用Gecko渲染引擎的版本.按照yyyymmdd格式的日期
ApplicationProduct 使用 Mozilla 代码的品牌浏览器的名称.在 Netscape 6 发行版中,它是Netscape6
Netscape 7 改成 Netscape
ApplicationProductVersion 使用Mozilla代码的品牌浏览器的版本
如: Mozilla/5.0 (Window; U; Windows NT 5.1; en-US; rv:0.9.4) Gecko/20011128 Netscape6/6.2.1
其中rv:0.9.4是PrereleaseVersion
Opera的user-agent 字符串的格式
Opera/AppVersion (OS; Security) [Language]
如: Opera/7.54 (Windows NT 5.1; U) [en]
Opera可以伪装其它浏览器,它伪装 Mozilla 成时,返回的user-agent 字符串为:
Mozilla/5.0 (Windows NT 5.1; U) Opera 7.54
Mozilla/3.0 (Windows NT 5.1; U) Opera 7.54 等
它伪装 IE 6.0 成时,返回的user-agent 字符串为:
Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1) Opera 7.54
Safari的user-agent 字符串的格式:
Mozilla/5.0 (platform; Security; OS-or-CPU; Language) AppleWebKit/AppleWebKitVersion (KHTML,
like Gecko) Safari/SafariVersion
如: Mozilla/5.0 (Macintosh; U; PPC Mac OS X; en) AppleWebKit/124 (KHTML, like Gecko)
Safari/125.1
浏览器检测和操作系统检测的全部脚本:(其中的具体各个成分的检测太多太细,而且下来有,只是没有做解释了,有兴趣好好理解吧)
detect.js文件:
var userAgent = navigator.userAgent;
var appVersion = parseFloat(navigator.appVersion);
// 判断两个版本号的大小情况
// 使用这个函数来判断而不是直接用大于号来判断是因为
// 有些版本号不只一个小数点,如 0.9.2 这样就只能特殊处理了
function compareVersion(version1,version2){
var version1 = version1.split(".");
var version2 = version2.split(".");
// 先使两个版本号数组的元素个数相同
if(version1.length > version2.length){
for(var i=0; i< version1.length - version2.length; i++){
version2.push("0");
}
}
else if(version1.length < version2.length){
for(var i=0; i< version2.length - version1.length; i++){
version1.push("0");
}
}
for(var i =0; i < version1.length; i++){
if(version1[i] < version2[i]){
return -1; // 第一个小于第二个时 -1
}
else if(version1[i] > version2[i]){
return 1; // 第一个大于第二个时 1
}
}
return 0; // 第一个等到于第二个时 0
}
var isOpera = userAgent.indexOf("Opera") > -1; // Opera浏览器的user-agent 字符串中一定有"Opera"
var isMinOpera4 = isMinOpera5 = isMinOpera6 = isMinOpera7 = isMinOpera7_5 = false;
if(isOpera){
var operaVersion;
if(navigator.appName = "Opera"){ // 不是伪装他人的浏览器,版本号则如下
operaVersion = appVersion;
}
else{ // 伪装了他人的浏览器时,使用正则表达式匹配出来
var reOperaVersion = new RegExp("Opera (//d+//.//d+)");
reOperaVersion.test(userAgent);
operaVersion = parseFloat(RegExp["$1"]);
}
isMinOpera4 = operaVersion >= 4; // 逐步判断真正的版本号
isMinOpera5 = operaVersion >= 5;
isMinOpera6 = operaVersion >= 6;
isMinOpera7 = operaVersion >= 7;
isMinOpera7_5 = operaVersion >= 7.5;
}
// 决断是否基于KHTML,先作为一个大类,然后在内部区分是两种中的哪种浏览器
var isKHTML = userAgent.indexOf("KHTML") > -1 // 决断是否基于KHTML,一般会有"KHTML"
|| userAgent.indexOf("Konqueror") > -1 // Konqueror浏览器
|| userAgent.indexOf("AppleWebKit") > -1;
// Safari浏览器,倡议是测是否含有"AppleWebKit"
var isMinSafari1 = isMinSafari2 = false;
var isMinKonq2_2 = isMinKonq3 = isMinKonq3_1 = isMinKonq3_2 = false;
if(isKHTML){
var isSafari = userAgent.indexOf("AppleWebKit") > -1;
var isKonq = userAgent.indexOf("Konqueror") > -1;
// 判断Safari的版本号
if(isSafari){
var reAppleWebKit = new RegExp("AppleWebKit///(//d+(?://.//d*)?)");
reAppleWebKit.test(userAgent);
var appleWebKitVersion = parseFloat(RegExp["$1"]);
isMinSafari1 = appleWebKitVersion >= 85;
isMinSafari2 = appleWebKitVersion >= 124;
}
// 判断Konqueror的版本号
else if(isKonq){
var reKonq = new RegExp("Konqueror///(//d+(?://.//d+(?://.//d)?)?");
reKonq.test(userAgent);
isMinKonq2_2 = compareVersion(RegExp["$1"],"2.2") >= 0;
isMinKonq3 = compareVersion(RegExp["$1"],"3.0") >= 0;
isMinKonq3_1 = compareVersion(RegExp["$1"],"3.1") >= 0;
isMinKonq3_2 = compareVersion(RegExp["$1"],"3.2") >= 0;
}
}
// 利用三个条件来判断是否是IE浏览器
var isIE = userAgent.indexOf("compatible") > -1
&& userAgent.indexOf("MSIE") > -1
&& !isOpera; // 防止是Opera的伪装
var isMinIE4 = isMinIE5 = isMinIE5_5 = isMinIE6 = false;
if(isIE){
var reIE = new RegExp("MSIE (//d+//.//d+);"); // 获取IE版本号
reIE.test(userAgent);
var IEVersion = parseFloat(RegExp["$1"]);
isMinIE4 = IEVersion >= 4;
isMinIE5 = IEVersion >= 5;
isMinIE5_5 = IEVersion >= 5.5;
isMinIE6 = IEVersion >= 6;
}
var isMozilla = userAgent.indexOf("Gecko") > -1
&& !isKHTML; // 可能是Konqueror,Safari浏览器的伪装
var isMinMoz1 = isMinMoz1_4 = isMinMoz1_5 = false;
if(isMozilla){
var reMoz = new RegExp("rv:(//d+//.//d+(?://.//d+)?)");
reMoz.test(userAgent);
isMinMoz1 = compareVersion(RegExp["$1"],"1.0") >= 0;
isMinMoz1_4 = compareVersion(RegExp["$1"],"1.4") >= 0;
isMinMoz1_5 = compareVersion(RegExp["$1"],"1.5") >= 0;
}
// 判断是否是 Netscape Communicator 4.x 系列的浏览器
// 判断方法是先确定非前面的浏览器,而后再根据一些特殊的判断来最终判断
var isNS4 = !isIE && !isOpera && !isMozilla && !isKHTML
&& (userAgent.indexOf("Mozilla") == 0)
&& (navigator.appName == "Netscape")
&& (appVersion >= 4.0 && appVersion < 5.0);
var isMinNS4 = isMinNS4_5 = isMinNS4_7 = isMinNS4_8 = false;
if(isNS4){
isMinNS4 = true; // 前面的判断确信已经是NS4版本了
isMinNS4_5 = appVersion >= 4.5;
isMinNS4_7 = appVersion >= 4.7;
isMinNS4_8 = appVersion >= 4.8;
}
// 判断操作系统的信息
var isWin = (navigator.platform == "Win32") || (navigator.platform == "Windows");
var isMac = (navigator.platform == "Mac68K") || (navigator.platform == "MacPPC")
|| (navigator.platform == "Macintosh");
// IE 和 Netscape Communicator 对 Windows 32位操作系统返回"Win32"
// 对 Macintosh系统返回"Mac68K"或"MacPPC"
// Mozilla等有些浏览器对 Windows 系统会返回 "Windows" 或上面的值
// 对所有的 Macintosh 系统返回 "Macintosh"
// 因为浏览器对于使用的Unix返回的信息因人而异,所以先保证不是上面两种,然后检查是否是"X11"
var isUnix = (navigator.platform == "X11") && !isWin && !isMac;
var isWin95 = isWin98 = isWinNT4 = isWin2K = isWinME = isWinXP = false;
var isMac68K = isMacPPC = false;
var isSunOS = isMinSunOS4 = isMinSunOS5 = isMinSunOS5_5 = false;
if(isWin){
isWin95 = userAgent.indexOf("Win95") > -1
|| userAgent.indexOf("Windows 95") > -1;
isWin98 = userAgent.indexOf("Win98") > -1
|| userAgent.indexOf("Windows 98") > -1;
isWinME = userAgent.indexOf("Win 9x 4.90") > -1
|| userAgent.indexOf("Windows ME") > -1;
isWin2K = userAgent.indexOf("Windows NT 5.0") > -1
|| userAgent.indexOf("Windows 2000") > -1;
isWinXP = userAgent.indexOf("Windows NT 5.1") > -1
|| userAgent.indexOf("Windows XP") > -1;
isWinNT4 = (userAgent.indexOf("WinNT") > -1
|| userAgent.indexOf("Windows NT") > -1
|| userAgent.indexOf("WinNT 4.0") > -1
|| userAgent.indexOf("Windows NT 4.0") > -1)
&& (!isWinME && !isWin2K && !isWinXP);
}
if(isMac){
isMac68K = userAgent.indexOf("Mac_68000") > -1
|| userAgent.indexOf("68") > -1;
isMacPPC = userAgent.indexOf("Mac_PowerPC") > -1
|| userAgent.indexOf("PPC") > -1;
}
if(isUnix){
isSunOS = userAgent.indexOf("SunOS") > -1;
if(isSunOS){
var reSunOS = new RegExp("SunOS (//d+//.//d+(?://.//d+)?)");
reSunOS.test(userAgent);
isMinSunOS4 = compareVersion(RegExp["$1"],"4.0") >= 0;
isMinSunOS5 = compareVersion(RegExp["$1"],"5.0") >= 0;
isMinSunOS5_5 = compareVersion(RegExp["$1"],"5.5") >= 0;
}
}
一个使用的例子:
<head>
<title>Login</title>
<script type="text/javascript" src="scripts/detect.js"></script>
<script type="text/javascript">
window.onload = function(){
if((isMinIE5_5 && isWin) || (isMinMoz1 && isUnix)
|| (isMinSafari1 && isMac)){ //即满足这个网页的浏览器要求
document.getElementById("divLogin").style.visibility = "visible";
document.getElementById("divError").style.visibility = "hidden";
}
};
</script>
</head>
<body>
<form method="post" action="DoLogin.jsp"><!-- 这个JavaScript这里没有实现,用来验证用户登陆用的 --->
<div style="border:2px dashed blue; background-color: #dedede; height:300px; padding:10px">
<div id="divError" style="position:absolute; left:20px; top:100px;">
This web application requires one of the following:
<ul>
<li>Internet Explorer 5.5 or higher for Windows</li>
<li>Mozilla 1.0 or higher for Unix</li>
<li>safari 1.0 or higher for Macintosh</li>
</ul>
<noscript>
<p>
This web application also reqires JavaScript (if you are using one of the above browsers,
please make sure that JavaScript is enabled).
</p>
</noscript>
</div>
<div id="divLogin" style="position:absolute; left:20px; top:100px; visibility:hidden">
<table border="0" width="100%" height="100%">
<tr>
<td align="center">
<table border="0">
<tr>
<td> Username:</td>
<td><input type="text" name="txtUsername" /></td>
</tr>
<tr>
<td> Password:</td>
<td><input type="password" name="txtPassword" /></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" value="Login" /></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
</form>
</body>
</html>
3056
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
