由于每个浏览器都具有自己独到的扩展,所以在开发阶段去判断浏览器是一个非常重要的步骤,虽然浏览器开发商在公共接口方面投入了很多精力,努力的去支持最常用的公共功能;但是在现实中,浏览器之间的差异,以及不同浏览器的“怪癖”却是非常多的,因此客户端检测除了是一种补救措施,更是一种行之有效的开发策略。
在介绍浏览器检测方法之前必须要了解一个对象,那就是navigator对象。
Navigator对象最早由NetscapeNavigator2.0引入,现在已经成为识别客户端浏览器的事实标准,与之前的BOM对象一样,每个浏览器中的navigator对象也都有一套属于自己的属性和方法。由于其属性和方法较多,这里简单介绍几个。
比如要获取浏览器的名称以及版本号等信息,如下代码所示
alert('浏览器用户代理字符串:'+ navigator.userAgent); alert('浏览器的名称:'+ navigator.appName); alert('浏览器的版本:'+ navigator.appVersion); alert('浏览器所在的系统:'+ navigator.platform);
检测插件
插件是一类特殊的程序,它可以扩展浏览器的功能,通过下载安装完成。比如,在线音乐、视频动画等等插件。Navigator对象的plugins属性是一个数组,存储了浏览器已经安装的插件的完整列表。我们可以写js代码显示出所有的插件名以及根据插件名称检测浏览器是否安装了插件。代码如下:
//列举出所有的插件名 for(var i=0;i<navigator.plugins.length;i++){ document.write(navigator.plugins[i].name+'<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是否存在
ActiveX控件检测
IE浏览器没有插件,但提供了ActiveX控件。ActiveX控件是一种在Web页面中嵌入对象或数组的方法。由于在js中,我们无法把所有已经安装的ActiveX控件遍历出来,但我们还是可以去检测是否安装了某个控件的。举例如下
//检测IE中的控件 function hasIEPlugin(name){ try{ new ActiveXObject(name); return true; } catch(e){ return false; } } //检测Flash是否存在 alert(hasIEPlugin('ShockwaveFlash.ShockwaveFlash'));//参数为IE中代表Flash的标识符 //跨浏览器检测是否支持Flash function hasFlash(){ var result=hasPlugin('Flash'); if(!result){ result=hasIEPlugin('ShockwaveFlash.ShockwaveFlash'); } return result; } //检测Flash alert (hasFlash());小结:这些基础知识让我想起了,在浏览网页的时候,有时候页面会弹出提示框,说什么没安装Flash或者是其他什么插件了控件了等等,或许那些检测就是基于上述的基础知识而来的吧。