`
qbaty
  • 浏览: 96930 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

关于浏览器的检测

阅读更多
浏览器的检测这是一个谈烂的话题,这次拿出来说,也没有其他特别的目的,现在主流的类库都已经完好的支持了所有主流的浏览器嗅探。
但是对于国内用户来说,还有很多用户正在使用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)
分享到:
评论

相关推荐

    js检测浏览器类型

    在提供的`browser.js`文件中,可能包含了更具体的浏览器检测代码或者工具函数,可以结合这个文件进行学习和实践,了解如何在实际项目中运用这些技术来适配不同的浏览器环境。 总结来说,JavaScript通过`navigator....

    浏览器内核检测工具.txt

    浏览器内核检测工具浏览器内核检测工具浏览器内工具.核检测工具浏览器内核检测工具浏览器内核检测工具ss

    js检测各种浏览器

    js检测ie8,ie9,ie10,ie11,edge,chrome,safari,opera。vue可直接引入。

    js检测浏览器版本 javascript检测浏览器

    可以检测 目前主流的浏览器及版本,包括 *Microsoft Internet Explorer IE浏览器 * --> TheWorld 世界之窗 * --> TT浏览器 * --> 360浏览器 * Mathon 傲游浏览器 * Opera Opera浏览器 * Fire...

    浏览器检测脚本

    浏览器检测脚本是一种用于识别用户所使用的Web浏览器类型、版本以及特性的JavaScript代码。在Web开发中,这种脚本能够帮助开发者确保他们的网站或应用程序在不同的浏览器上具有良好的兼容性和性能。由于各浏览器对...

    使用js检测当前浏览器版本,多浏览器类型和版本号检测

    6. **现代浏览器检测** 除了传统的User-Agent检测,还可以使用特性检测(feature detection),如Modernizr库,来检测浏览器是否支持特定的HTML5、CSS3或JavaScript特性,而非依赖于特定的浏览器版本。 7. **最佳...

    浏览器检测的多种方式-javascript代码

    然而,需要注意的是,虽然`User-Agent`字符串可以提供关于浏览器的信息,但它并不是一个可靠的检测方法,因为该字符串可以被伪造或者修改。因此,在实际开发中,更推荐采用功能检测的方式(如Modernizr库),以确保...

    javascript经典特效---浏览器检测生成器.rar

    在标题提到的"javascript经典特效---浏览器检测生成器"中,我们主要讨论的是如何利用JavaScript来检测用户所使用的浏览器类型和版本,这对于确保网页在不同浏览器上的一致性表现至关重要。 浏览器检测是JavaScript...

    第18章 浏览器检测1

    浏览器检测是Web开发中的一个重要环节,它涉及到对用户所使用的浏览器类型、版本及特定功能的支持情况的识别。在本章中,我们将重点关注两个主要的知识点:`navigator`对象和客户端检测。 1. `navigator`对象 `...

    爬虫实战指南-如何防止被浏览器检测,避免被浏览器封杀.pdf

    本资源是一份详尽的爬虫实战指南,专注于解决在使用Selenium等自动化工具进行网页爬取时面临的关键挑战——如何防止被浏览器检测。通过深入剖析浏览器检测的原理,包括浏览器指纹识别和行为分析等技术,指南提供了...

    浏览器特性检测库Feature.js.zip

    Feature.js 是一个快速、简单、轻量级的浏览器特性检测库。它没有依赖,而且被压缩的仅 1kb。Feature.js 会在页面加载时自动初始化,但在初始化过程中不运行任何测试,只有在你发出请求时才运行,所以它的反应很快。...

    浏览器检测的js实现

    可以加入此JS来检测各种浏览器,对多浏览器开发有很大帮助。

    检测浏览器相关信息

    浏览器检测的主要目的是确保网站和应用在各种浏览器环境下都能正常运行。不同的浏览器可能对HTML、CSS、JavaScript等Web技术的实现存在差异,导致页面渲染效果和功能执行不尽相同。通过检测浏览器信息,开发者可以...

    js 特效 html 特效 浏览器检测生成器

    js 特效 html 特效 浏览器检测生成器 js 特效 html 特效 浏览器检测生成器

    判断浏览器类型(判断浏览器类型)

    在浏览器发送HTTP请求时,会包含一个名为`User-Agent`的头部信息,它包含了关于客户端(通常是浏览器)的详细信息。开发者可以通过分析这个字符串来判断浏览器类型。例如: - `Mozilla/5.0 (Windows NT 10.0; Win64...

    bowser, 浏览器检测器.zip

    bowser, 浏览器检测器 Bowser一个浏览器检测器。因为有时没有它的他方法,甚至现代浏览器也提供良好的特征检测机制。 那么。: 就像这样if (bowser.msie && bowser.version ) {

    浏览器检测java版本PluginDetect.js

    浏览器检测Java版本是Web开发中的一个重要环节,尤其是在依赖Java插件的应用场景中。`PluginDetect.js` 是一个JavaScript脚本库,专门用于检测用户浏览器中安装的Java版本信息。这个库通常被用来确保用户在访问特定...

    vue-browser-detect-plugin:Vue浏览器检测插件

    Vue浏览器检测插件 Vue的简单插件,可检测浏览器名称,版本和用户代理。 安装 npm install vue-browser-detect-plugin 在您的main.js: import browserDetect from " vue-browser-detect-plugin " ; Vue.use...

    Detector:用于检测用户浏览器环境的php类库。

    Detector是一个开源的PHP类库,用于检测用户的浏览器环境。它可以获得浏览器的使用情况和浏览器的HTML5 CSS3功能、并分析是否是移动、平板电脑、桌面和其他项,如:颜色深度、 尺寸、Cookie等。该库对每个浏览器用户...

Global site tag (gtag.js) - Google Analytics