浏览器的检测这是一个谈烂的话题,这次拿出来说,也没有其他特别的目的,现在主流的类库都已经完好的支持了所有主流的浏览器嗅探。
但是对于国内用户来说,还有很多用户正在使用maxthon,360,sogou,TT等这样的浏览器。
我们知道判断浏览器有两种方法,一种是直接根据UA来检测,一种是根据浏览器的特性来判断。
关于 navigator.userAgent
IE6-IE8没有啥说的
UA 只需要匹配 MSIE + 版本号就可以了
从IE7 到IE8的UA
Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 2.0.50727)
Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.2; Tablet PC 2.0)
Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.2; Tablet PC 2.0)
对于非IE来说
UA分别是
FF3.6 Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-CN; rv:1.9.2.16) Gecko/20110319 Firefox/3.6.16c
chrome Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US)
AppleWebKit/534.16 (KHTML, like Gecko) Chrome/10.0.648.151
Safari/534.16
safari Mozilla/5.0 (Windows; U; Windows NT 5.2) AppleWebKit/525.13 (KHTML, like Gecko) Version/3.1 Safari/525.13
对于国产浏览器来说
UA 则是
TT Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1 TencentTraveler 4.0; .NET CLR 2.0.50727)
world Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1 TencentTraveler 4.0; .NET CLR 2.0.50727; TheWorld)
360 Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1 TencentTraveler 4.0; .NET CLR 2.0.50727; 360SE)
maxthon Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/531.0 (KHTML, like Gecko) Chrome/5.0.195.0 Safari/531.0
sougo Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/534.3 (KHTML, like Gecko) Chrome/6.0.472.33 Safari/534.3 SE 2.X MetaSr 1.0
关于UA的总结:
通过UA来判断IE版本号,只需要匹配出MSIE + 版本号就可以了,IE9也是如此
通过UA来判断FF、Chrome、Safari的话,FF只需要判断gecko 或是 firefox,chrome则在UA含有 Chrome 和 Safari,所以先判断chrome,再判断是safari可以区分开chrome 和 safari
关于国产浏览器
TT 在打开的时候会临时篡改UA,发现打开TT后,所有IE核心的浏览器的UA里都含有TencentTravler了
world 和 360 都是在UA的后面加上了自己的标识
maxthon和sougo都是双核浏览器了,用的是 webkit 和 IE 的trident
maxthon 3的UA不会包含自己的标识,但是可以通过window.external.max_version来判断
最后得出一下代码:
if(/applewebkit\/([\d.]*)/.test(ua)){
core = 'webkit';
}else if(/presto\/([\d.]*)/.test(ua)){
core = 'presto';
}else if(/msie\s([^;]*)/.test(ua)){
core = 'trident';
}else if(/gecko/.test(ua)){
core = 'gecko';
}
if(/world/.test(ua)){
extra = 'world';
}else if(/360se/.test(ua)){
extra = '360';
}else if((/maxthon/.test(ua)) || typeof external.max_version == 'number'){
extra = 'maxthon';
}else if(/tencenttraveler\s([\d.]*)/.test(ua)){
extra = 'tt';
}else if(/se\s([\d.]*)/.test(ua)){
extra = 'sogou';
}
return {
'CORE':core,
'EXTRA':(extra?extra:false),
'IE': /msie/.test(ua),
'IE5': /msie 5 /.test(ua),
'IE55': /msie 5.5/.test(ua),
'IE6': /msie 6/.test(ua),
'IE7': /msie 7/.test(ua),
'IE8': /msie 8/.test(ua),
'IE9': /msie 9/.test(ua),
'SAFARI': !/chrome\/([\d.]*)/.test(ua) && /\/([\d.]*) safari/.test(ua),
'CHROME': /chrome\/([\d.]*)/.test(ua)
}
说完了UA,来说说特性检测吧,所有的浏览器对js的解释都不太一样,就导致了有些浏览器往往有其自己的特殊的方法,我们在写代码实现的时候,对于浏览器的检测比较推荐的做法就是特性检测而非UA检测,因为UA是可以被篡改的。
我们都知道在IE浏览器下,是没有直接创建XMLHttpRequest的方法,必须要通过ActiveXObject来创建,所以判断的时候直接判断是否能够创建XMLHttpRequest来使用ajax请求,还有event对象的target和srcElement等等,这些都是经典的例子。
然而也有很多不那么经典的例子,比如CSS里的 fixed ,还有盒模型的解释等等。比较推荐的做法是在页面初始化的时候计算他的盒模型和fixed解释模式,然后记下,之后的判断基于初始化时计算的结构,而不是浏览器的版本。
关于判断核心
另外可以通过判断document.style里的属性来判断浏览器内核比如
docElement = document.documentElement;
isWebkit = ('webkitAppearance' in docElement.style)
isGecko = ('MozAppearance' in docElement.style)
分享到:
相关推荐
NULL 博文链接:https://canlynet.iteye.com/blog/2258438
浏览器内核检测工具浏览器内核检测工具浏览器内工具.核检测工具浏览器内核检测工具浏览器内核检测工具ss
js检测ie8,ie9,ie10,ie11,edge,chrome,safari,opera。vue可直接引入。
可以检测 目前主流的浏览器及版本,包括 *Microsoft Internet Explorer IE浏览器 * --> TheWorld 世界之窗 * --> TT浏览器 * --> 360浏览器 * Mathon 傲游浏览器 * Opera Opera浏览器 * Fire...
浏览器检测的多种方式;介绍了javascript中检测浏览器类型的不同方式
Feature.js 是一个快速、简单、轻量级的浏览器特性检测库。它没有依赖,而且被压缩的仅 1kb。Feature.js 会在页面加载时自动初始化,但在初始化过程中不运行任何测试,只有在你发出请求时才运行,所以它的反应很快。...
可以加入此JS来检测各种浏览器,对多浏览器开发有很大帮助。
js检测当前浏览器版本,在网络开发中我们经常要用到检测浏览器的版本和类型,以便网站支持兼容,尤其是对于ie各个版本浏览器的兼容。
js 特效 html 特效 浏览器检测生成器 js 特效 html 特效 浏览器检测生成器
bowser, 浏览器检测器 Bowser一个浏览器检测器。因为有时没有它的他方法,甚至现代浏览器也提供良好的特征检测机制。 那么。: 就像这样if (bowser.msie && bowser.version ) {
浏览器检测java版本PluginDetect.js 最新版
如何用JavaScript检测当前浏览器是无头浏览器 目录 什么是无头浏览器(headless browser)?为什么叫“无头”浏览器?为什么要检测无头浏览器?检测无头浏览器User agent插件 Plugins语言WebGL浏览器特征加载失败的...
1.navigator 对象 2.客户端检测 1.浏览器及版本号 2.浏览器嗅探器 3.检测插件 1.能力检测 2.怪癖检测(bug 检测)
Detector是一个开源的PHP类库,用于检测用户的浏览器环境。它可以获得浏览器的使用情况和浏览器的HTML5 CSS3功能、并分析是否是移动、平板电脑、桌面和其他项,如:颜色深度、 尺寸、Cookie等。该库对每个浏览器用户...
Vue浏览器检测插件 Vue的简单插件,可检测浏览器名称,版本和用户代理。 安装 npm install vue-browser-detect-plugin 在您的main.js: import browserDetect from " vue-browser-detect-plugin " ; Vue.use...
检测浏览器
关于获取浏览器主要用于检测浏览器的版本的一些基本的信息,例如,获取浏览器的代码名称.....
浏览器检测生成器.rar
可以检测 目前主流的浏览器及版本,... 之前有人说它对火狐和opera浏览器检测不到位,我查了一下确实是这样的,只是因为我之前没有对每个浏览器进行测试,所以有个别浏览器只是凭感觉写的。 现在这个问题已经修复了,
完整版检测鼠标离开事件.e.rar