JavaScript浏览器检测之navigator 对象
一、使用客户端检测的原因
由于每个浏览器都具有自己独到的扩展，所以在开发阶段来判断浏览器是一个非常重要的步骤。
虽然浏览器开发商在公共接口方面投入了很多精力，努力的去支持最常用的公共功能；
但在现实中，浏览器之间的差异，以及不同浏览器的“怪癖”却是非常多的，因此客户端检测除了是一种补救措施，更是一种行之有效的开发策略。
二、navigator 对象概述
navigator 对象最早由 Netscape Navigator2.0 引入的 navigator 对象，现在已经成为识别客户端浏览器的事实标准。
与之前的 BOM 对象一样，每个浏览器中 的 navigator 对象也都有一套自己的属性。
alert(window.navigator);//navigator对象是window对象下的
1、浏览器及版本号:
不同的浏览器支持的功能、属性和方法各有不同。比如 IE 和 Firefox 显示的页面可能就会有所略微不同。
alert('浏览器名称：' + navigator.appName);//浏览器名称：Netscape 这个属性不能精确的取到浏览器的名称
alert('浏览器用户代理字符串：' + navigator.userAgent);//表示的是浏览器信息的东西 浏览器用户代理字符串：Mozilla/5.0 (Windows NT 6.1; WOW64; rv:26.0) Gecko/20100101 Firefox/26.0
alert('浏览器所在的系统：' + navigator.platform);//只是单纯的检测出是什么平台，检测不出win7还是winxp等等
alert('浏览器版本：' + navigator.appVersion);
2、浏览器嗅探器
浏览器嗅探器是一段程序，有了它，浏览器检测就变得简单了。
我们这里提供了一个browserdetect.js 文件，用于判断浏览器的名称、版本号及操作系统。
browserdetect.js ：（浏览器探测器——浏览器名称，浏览器版本，浏览器所在的操作系统）
var BrowserDetect = { init: function () { this.browser = this.searchString(this.dataBrowser) || "An unknown browser"; this.version = this.searchVersion(navigator.userAgent) || this.searchVersion(navigator.appVersion) || "an unknown version"; this.OS = this.searchString(this.dataOS) || "an unknown OS"; }, searchString: function (data) { for (var i=0;i<data.length;i++) { var dataString = data[i].string; var dataProp = data[i].prop; this.versionSearchString = data[i].versionSearch || data[i].identity; if (dataString) { if (dataString.indexOf(data[i].subString) != -1) return data[i].identity; } else if (dataProp) return data[i].identity; } }, searchVersion: function (dataString) { var index = dataString.indexOf(this.versionSearchString); if (index == -1) return; return parseFloat(dataString.substring(index+this.versionSearchString.length+1)); }, dataBrowser: [ { string: navigator.userAgent, subString: "Chrome", identity: "Chrome" }, { string: navigator.userAgent, subString: "OmniWeb", versionSearch: "OmniWeb/", identity: "OmniWeb" }, { string: navigator.vendor, subString: "Apple", identity: "Safari", versionSearch: "Version" }, { prop: window.opera, identity: "Opera", versionSearch: "Version" }, { string: navigator.vendor, subString: "iCab", identity: "iCab" }, { string: navigator.vendor, subString: "KDE", identity: "Konqueror" }, { string: navigator.userAgent, subString: "Firefox", identity: "Firefox" }, { string: navigator.vendor, subString: "Camino", identity: "Camino" }, { // for newer Netscapes (6+) string: navigator.userAgent, subString: "Netscape", identity: "Netscape" }, { string: navigator.userAgent, subString: "MSIE", identity: "Internet Explorer", versionSearch: "MSIE" }, { string: navigator.userAgent, subString: "Gecko", identity: "Mozilla", versionSearch: "rv" }, { // for older Netscapes (4-) string: navigator.userAgent, subString: "Mozilla", identity: "Netscape", versionSearch: "Mozilla" } ], dataOS : [ { string: navigator.platform, subString: "Win", identity: "Windows" }, { string: navigator.platform, subString: "Mac", identity: "Mac" }, { string: navigator.userAgent, subString: "iPhone", identity: "iPhone/iPod" }, { string: navigator.platform, subString: "Linux", identity: "Linux" } ] }; BrowserDetect.init();
<script type="text/javascript" src="browserdetect.js"></script> <script type="text/javascript"> alert(BrowserDetect.browser); alert(BrowserDetect.version); alert(BrowserDetect.OS); //给IE7以下的浏览器做特殊处理 if(BrowserDetect.browser=='Interent Explorer' && BrowserDelect.version < 7){ alert("需要做IE低版本的兼容"); } </script>
3、检测插件
IE浏览器不能用，因为IE浏览器没有插件
插件是一类特殊的程序。他可以扩展浏览器的功能，通过下载安装完成。
比如，在线音乐、视频动画等等插件。navigator 对象的 plugins 属性，这是一个数组。存储在浏览器已安装插件的完整列表。
//列出所有的插件名 for (var i = 0; i < navigator.plugins.length; i ++) { document.write(navigator.plugins[i].name + '<br />'); document.write(navigator.plugins[i].filename + '<br />'); document.write(navigator.plugins[i].description + '<br />'); document.write('<br />'); }
定义一个功能用于判断某插件是否存在（非IE浏览器插件）
function hasPlugin(name) { var name = name.toLowerCase(); for (var i = 0; i < navigator.plugins.length; i ++) { if (navigator.plugins[i].name.toLowerCase().indexOf(name) > -1) { return true; } } return false; } alert(hasPlugin('Flash')); //检测 Flash 是否存在 alert(hasPlugin('java')) //检测 Java 是否存在
4、ActiveX:
IE 浏览器没有插件，但提供了 ActiveX 控件。
ActiveX 控件一种在 Web 页面中嵌入对象或组件的方法。
由于在 JS 中，我们无法把所有已安装的 ActiveX 控件遍历出来，但我们还是可以去验证是否安装了此控件。
//检测 IE 中的控件 function hasIEPlugin(name) { try { new ActiveXObject(name);//这里的name必须是控件的唯一标识符id（每个控件都有它的唯一标识符） return true; } catch (e) { return false; } } //检测 Flash（传入的是Flash控件的标识符） alert(hasIEPlugin('ShockwaveFlash.ShockwaveFlash'));
ShockwaveFlash.ShockwaveFlash 是 IE 中代表 FLASH 的标识符，你需要检查哪种控件，必须先获取它的标识符。
5、跨浏览器检测是否支持 Flash
//检测非IE的 function hasPlugin(name) { var name = name.toLowerCase(); for (var i = 0; i < navigator.plugins.length; i ++) { if (navigator.plugins[i].name.toLowerCase().indexOf(name) > -1) { return true; } } return false; } //检测 IE 中的控件 function hasIEPlugin(name) { try { new ActiveXObject(name);//这里的name必须是控件的唯一标识符id（每个控件都有它的唯一标识符） return true; } catch (e) { return false; } } //跨浏览器 function hasFlash() { var result = hasPlugin('Flash'); //如果返回true，说明检测到了，并且不是IE浏览器，如果没有检测到 说明这个浏览器没有Flash插件，或者他可能是IE浏览器 if (!result) { result = hasIEPlugin('ShockwaveFlash.ShockwaveFlash'); } return result; } //检测 Flash alert(hasFlash());
6、MIME 类型
MIME 是指多用途因特网邮件扩展。它是通过因特网发送邮件消息的标准格式。
现在也被用于在因特网中交换各种类型的文件。PS：mimeType[]数组在 IE 中不产生输出。
//遍历非 IE 下所有 MIME 类型信息 for (var i = 0; i < navigator.mimeTypes.length; i++) { if (navigator.mimeTypes[i].enabledPlugin != null) {document.write('<dl>'); document.write('<dd>类型名称：' + navigator.mimeTypes[i].type + '</dd>'); document.write('<dd>类型引用：' + navigator.mimeTypes[i].enabledPlugin.name +'</dd>'); document.write('<dd>类型描述：' + navigator.mimeTypes[i].description + '</dd>'); document.write('<dd>类型后缀：' + navigator.mimeTypes[i].suffixes + '</dd>'); document.write('</dl>') } }