navigator对象最早由NetscapeNavigator2.0引入的navigator对象,现在已经成为识别客户端浏览器的事实标准。与之前的BOM对象一样,每个浏览器中的navigator对象也都有一套自己的属性。
//不同的浏览器支持的功能、属性和方法各有不同。比如IE和Firefox,可能就会有所略微不同。 alert('浏览器名称:' +navigator.appName); alert('浏览器版本:' +navigator.appVersion); alert('浏览器用户代理字符串:' +navigator.userAgent); alert('浏览器所在的系统:' +navigator.platform);
浏览器嗅探器是一段程序,有了它,浏览器检测就变得简单了。我们这里提供了一个browserdetect.js文件,用于判断浏览器的名称、版本号及操作系统。
BrowserDetect.browser 浏览器的名称,例如Firefox,IE BrowserDetect.version 浏览器的版本,比如,7、11 BrowserDetect.OS 浏览器所宿主的操作系统,比如Windows、Linux 插件是一类特殊的程序。他可以扩展浏览器的功能,通过下载安装完成。比如,在线音乐、视频动画等等插件。navigator对象的plugins属性,这个一个数组。存储在浏览器已安装插件的完整列表。
属性 含义 name 插件名 filename 插件的磁盘文件名 length plugins数组的元素个数 description 插件的描述信息 //列出所有的插件名 for (var i = 0; i <navigator.plugins.length; i ++) { document.write(navigator.plugins[i].name+ '<br />'); } //检测非IE浏览器插件是否存在 function hasPlugin(name) { varname = name.toLowerCase(); for(var i = 0; i < navigator.plugins.length; i ++) { if(navigator.plugins[i].name.toLowerCase().indexOf(name) > -1) { returntrue; } } returnfalse; } alert(hasPlugin('Flash')); //检测Flash是否存在 alert(hasPlugin('java')) //检测Java是否存在
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')); //ShockwaveFlash.ShockwaveFlash是IE中代表FLASH的标识符,必须先获取它的标识符。 //跨浏览器检测是否支持Flash function hasFlash() { varresult = hasPlugin('Flash'); if(!result) { result = hasIEPlugin('ShockwaveFlash.ShockwaveFlash'); } returnresult; } //检测Flash alert(hasFlash());
MIME是指多用途因特网邮件扩展。它是通过因特网发送邮件消息的标准格式。现在也被用于在因特网中交换各种类型的文件。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>') } }
客户端检测一共分为三种,分别为:能力检测、怪癖检测和用户代理检测,通过这三种检测方案,我们可以充分的了解当前浏览器所处系统、所支持的语法、所具有的特殊性能。
能力检测又称作为特性检测,检测的目标不是识别特定的浏览器,而是识别浏览器的能力。能力检测不必估计特定的浏览器,只需要确定当前的浏览器是否支持特定的能力,就可以给出可行的解决方案。
var width = window.innerWidth; //如果是非IE浏览器 if (typeof width != 'number') { //如果是IE,就使用document if(document.compatMode == 'CSS1Compat') { width =document.documentElement.clientWidth; }else { width = document.body.clientWidth; //非标准模式使用body } } //第一个是否支持innerWidth的检测,第二个是否是标准模式的检测,这两个都是能力检测。
怪癖检测 与能力检测类似,怪癖检测的目标是识别浏览器的特殊行为。但与能力检测确认浏览器支持什么能力不同,怪癖检测是想要知道浏览器存在什么缺陷(bug)。bug一般属于个别浏览器独有,在大多数新版本的浏览器被修复。
var box = { toString: function () {} //创建一个toString(),和原型中重名了 }; for (var o in box) { alert(o); //IE浏览器的一个bug,不识别了 }
用户代理代理检测,主要通过navigator.userAgent来获取用户代理字符串的,通过这组字符串,我们来获取当前浏览器的版本号、浏览器名称、系统名称。用户代理检测通过检测用户代理字符串来确定实际使用的浏览器。在每一次HTTP请求过程中,用户代理字符串是作为响应首部发送的,而且该字符串可以通过JavaScript的navigator.userAgent属性访问。
每个浏览器有它自己的呈现引擎:所谓呈现引擎,就是用来排版网页和解释浏览器的引擎。通过代理字符串发现,我们归纳出浏览器对应的引擎:
IE -- Trident, IE8体现出来了,之前的未体现
Firefox -- Gecko,
Opera -- Presto, 旧版本根本无法体现呈现引擎
Chrome -- WebKit WebKit是KHTML呈现引擎的一个分支,后独立开来
Safari -- WebKit
Konqueror -- KHTML
var client = function () { //创建一个对象 var engine = { //引擎 ie : false, //这个属性用于确定是否是IE引擎 gecko : false, webkit : false, khtml : false, opera : false, ver : 0 //引擎的版本 }; var browser = { //浏览器 ie : false, firefox : false, chrome : false, safari : false, opera : false, ver : 0, //浏览器的版本号 name : '' //浏览器通用名称 }; var system = { //系统 win : false, mac : false, x11 : false, sysname : '' //系统名称 }; //核心检测程序区 var ua = navigator.userAgent; var p = navigator.platform; if (p.indexOf('Win') == 0) { system.win = true; //用于确定是windows系统 system.sysname = 'Windows'; } else if (p.indexOf('Mac') == 0) { system.mac = true; //用于确定是Mac系统 system.sysname = 'Macintosh'; } else if (p == 'X11' || p.indexOf('Linux') == 0) { system.x11 = true; //用于确定是Linux系统 system.sysname = 'Linux'; } if (window.opera) { engine.opera = browser.opera = true; //表示确定opera引擎 engine.ver = browser.ver = window.opera.version(); browser.name = 'Opera'; } else if (/AppleWebKit\/(\S+)/.test(ua)) { 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 = 'Safari'; } } 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'; } } else if (/MSIE ([^;]+)/.test(ua)) { engine.ie = browser.ie = true; //表示确定ie引擎 engine.ver = browser.ver = RegExp['$1']; browser.name = 'Internet Explorer'; } return { //返回一个对象,可以同时返回引擎,浏览器和系统的对象 engine : engine, //前一个engine是属性,后一个engine是对象值 browser : browser, system : system } }(); //自我执行,并赋值 alert(client.system.sysname + '|' +client.browser.name + client.browser.ver);
客户端浏览器
精选 转载zhujingxiu 博主文章分类:javascript
文章标签 javascript 文章分类 Java 后端开发
上一篇:浏览器对象模型BOM
下一篇:DOM基础
-
前端 浏览器所在客户端信息
如果是在线查询,可以在点击https:/
服务端 客户端 初始化 -
[浏览器系列] : 客户端本地存储
客户端存储 在目前的现代浏览器中主要有以下几种存储方案 1.cookie 2.localStorage 3.sessionStorage 4.indexDB Cookie Cokkie 定义 Cookie 是客户端存储数据的选项之一,它主要用于客户端存...
indexeddb html5 vue.js javascript 数据