JavaScript FAQ（二十二）

于 2009-08-16 17:37:00 发布
阅读量78 收藏
点赞数
文章标签： JavaScript Chrome 浏览器 Linux Firefox ViewUI

十九、客户端信息

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>'); // -->

例子中进行浏览器检测的源代码是：

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的返回值，就像浏览器名称中的例子。下面就是你的浏览器的名称和版本：

<!-- 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>'); // -->

（源代码见文章浏览器名称）

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);

在你的操作系统上，这段脚本的结果是：

<!-- // 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 )

在你的浏览器中，代码输出为：

<!-- 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 )

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

<!-- 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 ) // -->

iteye_3224
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值