JavaScript FAQ（二十二）——客户端信息

十九、客户端信息

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
)

在你的浏览器中，代码的执行结果是：