目录
每个浏览器都有自己独特的扩展,所以在开发阶段来判断浏览器是一个非常重要的步骤。浏览器之间的差异,以及不同浏览器的“怪癖”非常多,因此客户端检测除了是一种补救措施,更是一种行之有效的开发策略。
一、navigator对象
navigator对象是window对象下的,它是识别客户端浏览器的事实标准,并有许多的属性。
1、浏览器及版本号
不同的浏览器支持的功能、属性和方法各有不同。
alert(window.navigator); //输出结果[object Navigator]
alert(navigator.appName); //浏览器的名称,该属性无法精确的取到浏览器的名字
alert(navigator.userAgent); //用户代理字符串,表示浏览器信息的内容
alert(navigator.platform); //表示所处在的操作系统平台
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();
将该外部的JS文件导入HTML中即可很简单的检测浏览器了,
<script type="text/javascript" src="browserdetect.js"></script>
如此,就可以直接调用封装好的方法来检测浏览器的各种信息,
alert(BrowserDetect.browser); //浏览器的名称
alert(BrowserDetect.version); //浏览器的版本
alert(BrowserDetect.OS); //浏览器所在的系统
3、检测插件
插件是一类特殊的程序。他可以扩展浏览器的功能,通过下载安装完成。navigator对象的plugins属性,这个一个数组。存储在浏览器已安装插件的完整列表。
属性 |
含义 |
name |
插件名 |
filename |
插件的磁盘文件名 |
length |
plugins数组的元素个数 |
description |
插件的描述信息 |
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/>");
}
譬如,检测浏览器是否存在Flash插件,然而IE浏览器又是很特殊的存在,需要和其他浏览器区别对待,
(1)检测非IE浏览器插件是否存在
function hasPlugin(name){
var name=name.toLowerCase();
for(var i=0;i<navigator.plugins.length;i++){
if(navigator.plugins[i].name.indexOf(name)>-1){
return true;
}
}
return false;
}
alert(hasPlugin("Flash"));
(2)检测IE浏览器的控件。
在IE中称之控件,因为IE浏览器没有插件,而提供了ActiveX控件。ActiveX控件是一种在Web页面中嵌入对象或组件的方法,
function hasIEPlugin(name){
try{ //此处尝试执行一段代码,如果有误则执行catch
new ActiveXObject(name) //这里的name必须是控件的唯一标识符ID
return true; //new成功了没有产生错误就不执行catch
}catch(e){
return false; //new失败了执行catch里语句
}
}
alert(hasIEPlugin('ShockwaveFlash.ShockwaveFlash'));
其中,ShockwaveFlash.ShockwaveFlash是IE中代表FLASH的标识符,你需要检查哪种控件,必须先获取它的标识符。
(3)跨浏览器检测
function hasPlugin(name){
var name=name.toLowerCase();
for(var i=0;i<navigator.plugins.length;i++){
if(navigator.plugins[i].name.indexOf(name)>-1){
return true;
}
}
return false;
}
function hasIEPlugin(name){
try{
new ActiveXObject(name)
return true;
}catch(e){
return false;
}
}
function hasFlash(){
//首先检测非IE浏览器
var result=hasPlugin("Flash"); //如果返回true说明检测到了,并不是IE浏览器
if(!result){ //如果没有检测到说明这个浏览器没有flash插件或可能是IE浏览器
result=hasIEPlugin("ShockwaveFlash.ShockwaveFlash");
}
return result;
}
alert(hasFlash());
二、客户端检测
客户端检测一共分为三种:能力检测、怪癖检测和用户代理检测。通过这三种检测方案,可了解当前浏览器所处系统、支持的语法、具有的特殊性能。
1、能力检测(特性检测)
能力检测不必估计特定的浏览器,只需要确定当前的浏览器是否支持特定的能力,就可以给出可行的解决方案。譬如,求不同浏览器的宽度,IE浏览器和其它浏览器不一样,可做兼容处理(也就是判断一下),
var width=window.innerWidth;
if(typeof width != "number"){
width=document.documentElement.clientWidth;
}
alert(width);
2、怪癖检测(bug检测)
怪癖检测的目标是识别浏览器的特殊行为。但与能力检测确认浏览器支持什么能力不同,怪癖检测是想要知道浏览器存在什么缺陷(bug)。
3、用户代理检测
通过检测用户代理字符串来确定实际使用的浏览器。在每一次HTTP请求过程中,用户代理字符串是作为响应首部发送的,而且该字符串可以通过JavaScript的navigator.userAgent属性访问,由此获取当前浏览器的版本号、浏览器名称、系统名称。
譬如,检测我当前学习的测验的浏览器,
document.write(navigator.userAgent);
// Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36
每个主流浏览器有它自己的内核(引擎),所谓呈现引擎,就是用来排版网页和解释浏览器的引擎。
主流浏览器 | 内核 |
IE | Trident(IE8体现出来了,之前的未体现) |
Firefox | Gecko |
Chrome | WebKit / blink |
Safari | WebKit |
Opera | Presto(旧版本根本无法体现呈现引擎) |
var client=function(){
//引擎(内核)
var engine={
ie:false,
gecko:false,
webkit:false,
khtml:false,
opera:false,
//内核的版本version
ver:0
};
//浏览器
var browser={
ie:false,
firefox:false,
chrome:false,
safari:false,
opera:false,
//浏览器的版本
ver:0,
//浏览器通用名称
name:""
}
//核心检测程序区
var ua=navigator.userAgent;
//Opera内核浏览器的检测
//因为只有Opera浏览器支持window.opera对象,其它浏览器无法识别。通过这个对象,可以很容易获取到Opera的信息
if(window.opera){
engine.opera=true; //表示确定了为Opera内核
engine.ver=window.opera.version();
browser.opera=true; //确定了为Opera浏览器
browser.ver=window.opera.version();
browser.name="Opera";
}
//webkit内核的浏览器检测
else if(/AppleWebKit\/(\S+)/.test(ua)){ //上例代码可知版本号为AppleWebKit/537.36,根据这个写出正则表达式进行判断
engine.webkit=true; //表示确定了为webkit内核
engine.ver=RegExp['$1'];
if(/Chrome\/(\S+)/.test(ua)){
browser.chrome=true; //确定了谷歌浏览器
browser.ver=RegExp['$1'];
browser.name="Chrome";
}else{
browser.safari=true; //确定了苹果浏览器
if(/Version\/(S+)/.test(ua)){
browser.ver=RegExp['$1'];
}
browser.name="Chrome";
}
}
//Gecko内核的浏览器检测
else if(/rv:([^\)]+)\)Gecko\/\d{8}/.test(ua)){
engine.gecko=true; //表示确定了为gecko内核
engine.ver=RegExp['$1'];
if(/Firefox\/(\S+)/.test(ua)){
browser.firefox=true; //确定了火狐浏览器
browser.ver=RegExp['$1'];
browser.name="Firefox";
}
}
//IE浏览器内核检测
else if(/MSIE([^;]+)/.test(ua)){
engine=true; //表示确定了为IE内核
engine.ver=RegExp['$1'];
browser.ie=true; //确定了为IE浏览器
browser.ver=RegExp['$1'];
browser.name="Internet Explorer";
}
return{ //返回一个对象,这样可同时返回引擎、浏览器
engine:engine, //返回引擎,前一个engine为属性,后一个engine是对象值
browser:browser
}
}(); //自我执行并赋值
if(client.engine.opera){
alert("当前使用的为Opera浏览器,版本为:"+client.engine.ver);
}
if(client.engine.webkit){
alert("WebKit引擎的版本为:"+client.engine.ver);
}
if(client.engine.gecko){
alert("Gecko引擎的版本为:"+client.engine.ver);
}
alert(client.browser.name+client.browser.ver);