十九、客户端信息
1、浏览器名称（Browser Name）
Q：我如何检测浏览器名称？
A：要获取用户浏览器的实际名称，你可以用navigator.appName和navigator.userAgent属性。userAgent属性比appName更可靠些，例如，Firefox（和其他一些浏览器）由于兼容Netscape Navigator，因此对navigator.appName可能返回“Netscape”。
下面的代码实例使用navigator.userAgent实现浏览器检测。同时，它也使用了navigator.appName和navigator.appVersion，仅在userAgent返回非期望形式时作为参考。下面就是在你浏览器中输出：
例子中进行浏览器检测的源代码是：
var nVer = navigator.appVersion;
var nAgt = navigator.userAgent;
var browserName = navigator.appName;
var fullVersion = ''+parseFloat(navigator.appVersion);
var majorVersion = parseInt(navigator.appVersion,10);
var nameOffset,verOffset,ix;
// In MSIE, the true version is after "MSIE" in userAgent
if ((verOffset=nAgt.indexOf("MSIE"))!=-1) {
browserName = "Microsoft Internet Explorer";
fullVersion = nAgt.substring(verOffset+5);
}
// In Opera, the true version is after "Opera"
else if ((verOffset=nAgt.indexOf("Opera"))!=-1) {
browserName = "Opera";
fullVersion = nAgt.substring(verOffset+6);
}
// In Chrome, the true version is after "Chrome"
else if ((verOffset=nAgt.indexOf("Chrome"))!=-1) {
browserName = "Chrome";
fullVersion = nAgt.substring(verOffset+7);
}
// In Safari, the true version is after "Safari"
else if ((verOffset=nAgt.indexOf("Safari"))!=-1) {
browserName = "Safari";
fullVersion = nAgt.substring(verOffset+7);
}
// In Firefox, the true version is after "Firefox"
else if ((verOffset=nAgt.indexOf("Firefox"))!=-1) {
browserName = "Firefox";
fullVersion = nAgt.substring(verOffset+8);
}
// In most other browsers, "name/version" is at the end of userAgent
else if ( (nameOffset=nAgt.lastIndexOf(' ')+1) < (verOffset=nAgt.lastIndexOf('/')) )
{
browserName = nAgt.substring(nameOffset,verOffset);
fullVersion = nAgt.substring(verOffset+1);
if (browserName.toLowerCase()==browserName.toUpperCase()) {
browserName = navigator.appName;
}
}
// trim the fullVersion string at semicolon/space if present
if ((ix=fullVersion.indexOf(";"))!=-1) fullVersion=fullVersion.substring(0,ix);
if ((ix=fullVersion.indexOf(" "))!=-1) fullVersion=fullVersion.substring(0,ix);
majorVersion = parseInt(''+fullVersion,10);
if (isNaN(majorVersion)) {
fullVersion = ''+parseFloat(navigator.appVersion);
majorVersion = parseInt(navigator.appVersion,10);
}
document.write('Browser name = '+browserName+'<br>');
document.write('Full version = '+fullVersion+'<br>');
document.write('Major version = '+majorVersion+'<br>');
document.write('navigator.appName = '+navigator.appName+'<br>');
document.write('navigator.userAgent = '+navigator.userAgent+'<br>');
2、浏览器版本（Browser Version）
Q：如何检测浏览器版本？
A：不幸得是，navigator.appVersion在检测上浏览器版本上并不够好。例如，在很多支持JavaScript的浏览器，navigator.appVersion的值是兼容的Netscape Navigator的版本，而不是用户浏览器的实际版本。（甚至，在JavaScript应用的早期，Microsoft Internet Explorer 3的navigator.appVersion的返回值是2，就意味着它兼容于Netscape Navigator2。）
因此，要获得任何上述浏览器的完全版本数，你需要依赖navigator.userAgent的返回值，就像浏览器名称中的例子。下面就是你的浏览器的名称和版本：
（源代码见文章浏览器名称）
3、操作系统（Operating System）
Q：如何检测客户机上的操作系统？
A：要检测客户机上的操作系统，脚本需要分析navigator.appVersion的值。下面就是一个简单的例子，它将操作系统的名称赋给OSName变量。
// This script sets OSName variable as follows:
// "Windows" for all versions of Windows
// "MacOS" for all versions of Macintosh OS
// "Linux" for all versions of Linux
// "UNIX" for all other UNIX flavors
// "Unknown OS" indicates failure to detect the OS
var OSName="Unknown OS";
if (navigator.appVersion.indexOf("Win")!=-1) OSName="Windows";
if (navigator.appVersion.indexOf("Mac")!=-1) OSName="MacOS";
if (navigator.appVersion.indexOf("X11")!=-1) OSName="UNIX";
if (navigator.appVersion.indexOf("Linux")!=-1) OSName="Linux";
document.write('Your OS: '+OSName);
在你的操作系统上，这段脚本的结果是：
（要获得更详细的操作系统信息，脚本可以对navigator.appVersion做更加复杂的分析，但是原理是一样。）
4、屏幕尺寸（Screen Size）
Q：如何获取客户机的屏幕尺寸？
A：要检测客户机的屏幕尺寸，可以使用属性screen.width和screen.height，这两个属性在主要浏览器的4上版本都被支持。如果你的用户使用Netscape Navigator 3并且启用了Java，你可以用Java调用来获得屏幕的宽和高（见下面的例子）。
下面的代码将屏幕的实际宽和高分别赋给了变量screenW和screenH，然后输出它们的值。如果用户使用的是旧版浏览器，那么screenW和sreenH就分别被赋值为640和480。
var screenW = 640, screenH = 480;
if (parseInt(navigator.appVersion)>3) {
screenW = screen.width;
screenH = screen.height;
}
else if (navigator.appName == "Netscape"
&& parseInt(navigator.appVersion)==3
&& navigator.javaEnabled()
)
{
var jToolkit = java.awt.Toolkit.getDefaultToolkit();
var jScreenSize = jToolkit.getScreenSize();
screenW = jScreenSize.width;
screenH = jScreenSize.height;
}
document.write(
"Screen width = "+screenW+"<br>"
+"Screen height = "+screenH
)
在你的浏览器中，代码输出为：
5、浏览器窗口尺寸（Browser Window Size）
Q：如何获取浏览器窗口的尺寸？
A：要确定浏览器窗口的实际尺寸，可以使用下面的属性
- 在Netscape Navigator 4中：window.innerWidth、window.innerHeight
- 在Microsoft Internet Explorer中：document.body.offsetWidth、document.body.offsetHeight
注意，document.body.offsetWidht和document.body.offsetHeight必须在浏览器加载<BODY>标签完成后执行。
在下面的代码中，winW和winH分别被赋值为实际浏览器窗口的宽和高，然后被输出。如果用户使用旧版浏览器，那么winW和winH将分别被设为630和460。
var winW = 630, winH = 460;
if (parseInt(navigator.appVersion)>3) {
if (navigator.appName=="Netscape") {
winW = window.innerWidth;
winH = window.innerHeight;
}
if (navigator.appName.indexOf("Microsoft")!=-1) {
winW = document.body.offsetWidth;
winH = document.body.offsetHeight;
}
}
document.write(
"Window width = "+winW+"<br>"
+"Window height = "+winH
)
在你的浏览器中，代码的执行结果是：