使用JavaScript进行浏览器检测

如果你真的必须这样做，用JavaScript检测别人使用的浏览器是很容易的。

JavaScript有一个标准对象叫做导航器它包含有关正在使用的浏览器的数据。

的导航器对象有很多属性，但是.userAgent属性——一个包含浏览器、操作系统等数据的字符串——就是我们所需要的。

如果我们想要表示navigator.userAgent，我们可以这样做:

警报

//在警告框中显示警报(navigator.userAgent);

navigator的值。Windows 7操作系统下Firefox 30中的userAgent

document . write

//写入HTML文档document . write (navigator.userAgent);

console.log ()

//在浏览器的开发者工具中显示它//这是理想的//当你正在开发/试验JavaScript时使用console.log()console.log (navigator.userAgent);

如果我在Windows 7上使用Internet Explorer 11，输出将是:

Mozilla/5.0 (Windows NT 6.1;WOW64;三叉戟/ 7.0;SLCC2;.net CLR 2.0.50727;.net CLR 3.5.30729;.net CLR 3.0.30729;Media Center PC 6.0;MASM;实现.NET4.0C; .NET4.0E; rv:11.0) like Gecko

如你所见，问题是navigator.userAgent它是一个巨大的字符串，也不是很容易读懂。

因此，如果我想处理这些信息，或者将其显示给用户，我需要首先解析字符串。

问题是我在正则表达式(以及许多其他的东西)方面极其笨拙，令人尴尬，所以我很高兴Detect.js存在由Darcy Clarke编写的JavaScript库。

js将能够将字符串值解析为人类可读和可操作的JavaScript对象。

要在控制台中显示浏览器名称、浏览器版本和操作系统，我们可以这样做:

//创建包含Detect.js内容的user对象//调用detect.parse()userAgent作为参数var user = detect.parse(navigator.userAgent);//在浏览器的开发工具控制台中显示一些属性值Console.log (user.browser.family user.browser.version user.os.name);

在Firebug，这是我将看到的:

Firefox 30 Windows 7

这是我将在Chrome DevTools中看到的使用同一台机器:

Chrome 35 Windows 7

要针对特定的浏览器，可以使用条件语句。

例如，如果你只想瞄准桌面Safari，你可以这样做:

如果(user.browser。family === 'Safari'){警告('您正在使用Safari浏览器');}

下面是所有解析属性的表格:

财产	描述
browser.family	浏览器的名字
browser.name	浏览器的名称和版本号
browser.version	浏览器的完整版本
browser.major	浏览器的主版本号
browser.minor	浏览器的次要版本号
browser.patch	浏览器的补丁号
device.family	设备名称
device.name	设备名称和版本
device.version	设备完整版
device.major	设备的主版本号
device.major	设备的次要版本号
device.patch	设备的补丁号
device.type	设备类型(例如“桌面”或“移动”)
device.manufacturer	设备制造商
os.family	操作系统名称
os.name	操作系统名称完整版本
os.version	操作系统的完整版本
os.major	操作系统的主版本号
os.minor	操作系统的次要版本号
os.patch	操作系统的补丁号

注意:如果任何属性不能被解析，它的值将被解析零或未定义的。如果您要向用户显示信息，则应该为以下内容准备条件语句零和未定义的。

为什么不应该使用JavaScript浏览器检测

我不建议使用JavaScript浏览器检测。

你永远不应该将我所描述的技术用于任何关键任务。

为什么?

JavaScript浏览器检测不可靠

用户可以关闭JavaScript。

而且，现在有很多浏览器和浏览器版本——将来还会有更多的浏览器版本——这使得浏览器检测作为始终更新的代码库的一部分变得不切实际和不可维护。

特征检测是一个更好的选择

如果您使用JavaScript浏览器检测的目的是检查用户是否具有特定的浏览器功能-如新的HTML5 API，如WebRTC或帆布或者其他什么——最好是实时确定是否有这种能力。

我将使用WebRTC来证明我的观点。

根据caniuse.com，这是WebRTC的浏览器支持状态:

来源:caniuse.com

在上面的浏览器支持表中，红色表示不兼容，绿色表示兼容。

如果我们要使用浏览器检测来确定客户端是否能够使用WebRTC，它将需要大量的条件语句。而且每次推出新版本的浏览器时，我们都必须更新代码。

另外，我们只讨论支持表中列出的13种浏览器;我们还没有考虑目前市场上的其他浏览器以及尚未创建的浏览器。

我应该注意到，使用某种浏览器支持的参考表也不可靠。它是由像你我这样的人更新和维护的(尽管有些是使用功能检测脚本自动完成的)。

就像你我一样，生活有时会妨碍我们的工作。

相反，实时检查我们想要利用的特性是否在客户端浏览器中可用是一个好主意。这种技术叫做功能检测。

我们如何检测浏览器中是否有WebRTC功能?

我们知道一个支持webrtc的浏览器应该有getUserMedia ()函数，这样我们就可以检查是否可以调用它。

下面的代码测试客户端的WebRTC功能，如果该功能可用，则弹出一个警告框。这是借用和改编自中数：

// hasWebRTC是未定义的//如果.getUserMedia()(及其变体)不可用var hasWebRTC = navigator。getUserMedia || navigator。webkitGetUserMedia |mozGetUserMedia || navigator.msGetUserMedia;if (hasWebRTC) {alert('此浏览器完全或部分支持webrtc ');}

使用ModernizrJavaScript库，用于更复杂的浏览器功能检测。

我能想到的JavaScript浏览器检测的唯一原因是不必要的渐进式增强。

例如，如果我想稍微增加使用特定浏览器的人的体验，那么JavaScript浏览器检测是一个非常快速(也非常脏)的解决方案。

相关内容

• 响应全背景图像使用CSS
• 7个疯狂的技巧将帮助你成为一个更好的程序员
• 让你成为更好的程序员的5个好习惯