笑问客从何处来浏览器检测vs.特性检测

作者：永不放弃2702935973 | 来源：互联网 | 2023-06-08 09:36

之所以说浏览器类型检测比较尴尬，是因为有了一个打对台的东东，但是又不可能完全被替代，就是粒度更小的浏览器特性检测。所以现在就成了两者共存的

之所以说浏览器类型检测比较尴尬&＃xff0c;是因为有了一个打对台的东东&＃xff0c;但是又不可能完全被替代&＃xff0c;就是粒度更小的浏览器特性检测。

所以现在就成了两者共存的情况&＃xff0c;虽然根据特性来判断更为准确&＃xff0c;但是浏览器类型往往又是开发者判断的首选&＃xff0c;而且较为简单明了。

还是和以前一样&＃xff0c;站在巨人的肩膀上&＃xff0c;利用各个js的框架源码&＃xff0c;逐一分析比较一下。

注&＃xff1a;采用的框架版本&＃xff1a;prototype-1.6.1, mootools-1.2.4, jquery-1.4.2, ext-3.2.0, yui-3.1.0, dojo-1.4.2

prototype:

Browser : (function() {var ua &＃61; navigator.userAgent;var isOpera &＃61; Object.prototype.toString.call(window.opera) &＃61;&＃61; &＃39;[object Opera]&＃39;;return {IE : !!window.attachEvent && !isOpera,Opera : isOpera,WebKit : ua.indexOf(&＃39;AppleWebKit/&＃39;) > -1,Gecko : ua.indexOf(&＃39;Gecko&＃39;) > -1 && ua.indexOf(&＃39;KHTML&＃39;) &＃61;&＃61;&＃61; -1,MobileSafari : /Apple.*Mobile.*Safari/.test(ua)} })(), BrowserFeatures : {XPath : !!document.evaluate,SelectorsAPI : !!document.querySelector,ElementExtensions : (function() {var constructor &＃61; window.Element || window.HTMLElement;return !!(constructor && constructor.prototype);})(),SpecificElementExtensions : (function() {if (typeof window.HTMLDivElement !&＃61;&＃61; &＃39;undefined&＃39;)return true;var div &＃61; document.createElement(&＃39;div&＃39;);var form &＃61; document.createElement(&＃39;form&＃39;);var isSupported &＃61; false;if (div[&＃39;__proto__&＃39;] && (div[&＃39;__proto__&＃39;] !&＃61;&＃61; form[&＃39;__proto__&＃39;])) {isSupported &＃61; true;}div &＃61; form &＃61; null;return isSupported;})() }

浏览器检测
1. var isOpera &＃61; Object.prototype.toString.call(window.opera) &＃61;&＃61; &＃39;[object Opera]&＃39;&＃xff0c;较常见的是var isOpera &＃61;&＃61; !!window.opera&＃xff0c;当然这个不够准确&＃xff0c;因为我们可以在window下定义一个opera变量&＃xff0c;所以采用前一种写法更加准确。
2. window.attachEvent这个绑定事件的方法只有在ie及opera中支持&＃xff0c;其余的都是采用addEventListener&＃xff0c;因此可以用来判别是否是ie&＃xff0c;不过稍稍有点奇怪的是&＃xff0c;这里为什么就不怕用户自己加个attachEvent变量&＃xff0c;如果采用约定俗成的话&＃xff0c;那其实!!window.opera也足够了。
3. webkit, gecko这些都是采用最常见的useragent字符串检测。
特性检测
1. XPath&＃xff0c;document.evaluate会根据传入的path返回XPathResult对象&＃xff0c;XPath的语法详见这里&＃xff0c;除了ie外的主流浏览器基本都支持。
2. SelectorsAPI&＃xff0c;众多js selector&＃xff0c;sizzle&＃xff0c;peppy之类的终结者&＃xff0c;新一代的浏览器&＃xff0c;ff3.5&＃xff0c;saf4&＃xff0c;chrome&＃xff0c;op10&＃xff0c;嗯&＃xff0c;还有ie8&＃xff0c;都已经支持。
3. ElementExtensions&＃xff0c;大家对Object.prototype应该很熟悉了&＃xff0c;这就是在DOM中是否允许扩展prototype&＃xff0c;毫不意外&＃xff0c;出局的又是ie。

mootools:

var Browser &＃61; $merge({Engine : {name : &＃39;unknown&＃39;,version : 0},Platform : {name : (window.orientation !&＃61; undefined) ? &＃39;ipod&＃39;: (navigator.platform.match(/mac|win|linux/i) || [&＃39;other&＃39;])[0].toLowerCase()},Features : {xpath : !!(document.evaluate),air : !!(window.runtime),query : !!(document.querySelector)},Plugins : {},Engines : {presto : function() {return (!window.opera) ? false : ((arguments.callee.caller) ? 960 : ((document.getElementsByClassName)? 950 : 925));},trident : function() {return (!window.ActiveXObject) ? false : ((window.XMLHttpRequest) ? ((document.querySelectorAll) ? 6 : 5): 4);},webkit : function() {return (navigator.taintEnabled) ? false : ((Browser.Features.xpath)? ((Browser.Features.query) ? 525 : 420) : 419);},gecko : function() {return (!document.getBoxObjectFor && window.mozInnerScreenX &＃61;&＃61; null) ? false: ((document.getElementsByClassName) ? 19 : 18);}} }, Browser || {}); Browser.Platform[Browser.Platform.name] &＃61; true; Browser.detect &＃61; function() {for (var engine in this.Engines) {var version &＃61; this.Engines[engine]();if (version) {this.Engine &＃61; {name : engine,version : version};this.Engine[engine] &＃61; this.Engine[engine &＃43; version] &＃61; true;break;}}return {name : engine,version : version}; }; Browser.detect(); Browser.Request &＃61; function() {return $try(function() {return new XMLHttpRequest();}, function() {return new ActiveXObject(&＃39;MSXML2.XMLHTTP&＃39;);}, function() {return new ActiveXObject(&＃39;Microsoft.XMLHTTP&＃39;);}); }; Browser.Features.xhr &＃61; !!(Browser.Request()); Browser.Plugins.Flash &＃61; (function() {var version &＃61; ($try(function() {return navigator.plugins[&＃39;Shockwave Flash&＃39;].description;}, function() {return new ActiveXObject(&＃39;ShockwaveFlash.ShockwaveFlash&＃39;).GetVariable(&＃39;$version&＃39;);}) || &＃39;0 r0&＃39;).match(/\d&＃43;/g);return {version : parseInt(version[0] || 0 &＃43; &＃39;.&＃39; &＃43; version[1], 10) || 0,build : parseInt(version[2], 10) || 0}; })();

浏览器检测
1. 多了平台的判断&＃xff0c;这在某些情况下也还是有必要&＃xff0c;因为不同平台的同一浏览器可能表现不一样&＃xff0c;特别是手持终端平台。
2. 这里与常见的浏览器类型版本不同的是判断的浏览器渲染引擎&＃xff0c;presto是opera的专用&＃xff0c;同样trident是ie家族的&＃xff0c;使用webkit的就有很多&＃xff0c;著名的如safari&＃xff0c;chrome&＃xff0c;gecko著名的是ff。但是用特征判断引擎的版本就不是很准确&＃xff0c;因为版本在不断更新&＃xff0c;如果需要判断引擎版本&＃xff0c;还是推荐useragent分析&＃xff0c;当然&＃xff0c;实际上我们只关心引擎的大版本&＃xff0c;如presto2&＃xff0c;presto3&＃xff0c;具体的版本号其实没有什么意义。
特性检测
1. 特性里加了是否支持xhr&＃xff0c;目前绝大多数浏览器&＃xff0c;包括手机平台的&＃xff0c;都支持xhr&＃xff0c;所以个人觉得可有可无。
2. 插件判断加入是否安装flash&＃xff0c;两个不同函数分别对应非ie和ie&＃xff0c;但是要注意的是ie下有navigator.plugins这个对象&＃xff0c;只是是个空对象。

jquery:

jquery &＃61; {// ...uaMatch : function(ua) {var ret &＃61; {browser : ""};ua &＃61; ua.toLowerCase();if (/webkit/.test(ua)) {ret &＃61; {browser : "webkit",version : /webkit[\/ ]([\w.]&＃43;)/};} else if (/opera/.test(ua)) {ret &＃61; {browser : "opera",version : /version/.test(ua) ? /version[\/ ]([\w.]&＃43;)/ : /opera[\/ ]([\w.]&＃43;)/};} else if (/msie/.test(ua)) {ret &＃61; {browser : "msie",version : /msie ([\w.]&＃43;)/};} else if (/mozilla/.test(ua) && !/compatible/.test(ua)) {ret &＃61; {browser : "mozilla",version : /rv:([\w.]&＃43;)/};}ret.version &＃61; (ret.version && ret.version.exec(ua) || [0, "0"])[1];return ret;},browser : {} }; browserMatch &＃61; jQuery.uaMatch(userAgent); if (browserMatch.browser) {jQuery.browser[browserMatch.browser] &＃61; true;jQuery.browser.version &＃61; browserMatch.version; } // Deprecated, use jQuery.browser.webkit instead if (jQuery.browser.webkit) {jQuery.browser.safari &＃61; true; } // ... (function() {jQuery.support &＃61; {};var root &＃61; document.documentElement, script &＃61; document.createElement("script"), div &＃61; document.createElement("div"), id &＃61;"script" &＃43; now();div.style.display &＃61; "none";div.innerHTML &＃61;&＃39;a&＃39;; var all &＃61; div.getElementsByTagName("*"), a &＃61; div.getElementsByTagName("a")[0]; if (!all || !all.length || !a) { return; } jQuery.support &＃61; { leadingWhitespace : div.firstChild.nodeType &＃61;&＃61;&＃61; 3, tbody : !div.getElementsByTagName("tbody").length, htmlSerialize : !!div.getElementsByTagName("link").length, style : /red/.test(a.getAttribute("style")), hrefNormalized : a.getAttribute("href") &＃61;&＃61;&＃61; "/a", opacity : /^0.55$/.test(a.style.opacity), cssFloat : !!a.style.cssFloat, checkOn : div.getElementsByTagName("input")[0].value &＃61;&＃61;&＃61; "on", optSelected : document.createElement("select").appendChild(document.createElement("option")).selected, parentNode : div.removeChild(div.appendChild(document.createElement("div"))).parentNode &＃61;&＃61;&＃61; null, deleteExpando : true, checkClone : false, scriptEval : false, noCloneEvent : true, boxModel : null }; script.type &＃61; "text/Javascript"; try { script.appendChild(document.createTextNode("window." &＃43; id &＃43; "&＃61;1;")); } catch (e) { } root.insertBefore(script, root.firstChild); if (window[id]) { jQuery.support.scriptEval &＃61; true; delete window[id]; } try { delete script.test; } catch (e) { jQuery.support.deleteExpando &＃61; false; } root.removeChild(script); if (div.attachEvent && div.fireEvent) { div.attachEvent("onclick", function click() { jQuery.support.noCloneEvent &＃61; false; div.detachEvent("onclick", click); }); div.cloneNode(true).fireEvent("onclick"); } div &＃61; document.createElement("div"); div.innerHTML &＃61; &＃39;&＃39;; var fragment &＃61; document.createDocumentFragment(); fragment.appendChild(div.firstChild); jQuery.support.checkClone &＃61; fragment.cloneNode(true).cloneNode(true).lastChild.checked; jQuery(function() { var div &＃61; document.createElement("div"); div.style.width &＃61; div.style.paddingLeft &＃61; "1px"; document.body.appendChild(div); jQuery.boxModel &＃61; jQuery.support.boxModel &＃61; div.offsetWidth &＃61;&＃61;&＃61; 2; document.body.removeChild(div).style.display &＃61; &＃39;none&＃39;; div &＃61; null; }); var eventSupported &＃61; function(eventName) { var el &＃61; document.createElement("div"); eventName &＃61; "on" &＃43; eventName; var isSupported &＃61; (eventName in el); if (!isSupported) { el.setAttribute(eventName, "return;"); isSupported &＃61; typeof el[eventName] &＃61;&＃61;&＃61; "function"; } el &＃61; null; return isSupported; }; jQuery.support.submitBubbles &＃61; eventSupported("submit"); jQuery.support.changeBubbles &＃61; eventSupported("change"); // release memory in IE root &＃61; script &＃61; div &＃61; all &＃61; a &＃61; null; })();

浏览器检测
1. 很传统的useragent字符串检测。
2. 原来的safari被webkit代替&＃xff0c;估计是因为chrome的强势出现。
特性检测
1. leadingWhitespace&＃xff0c;ie中使用innnerHTML会将头部的空格自动去除&＃xff0c;注意&＃xff1a;尾部不会。
2. tbody&＃xff0c;如果table中没有tbody&＃xff0c;则自动插入。这本来是ie的特性&＃xff0c;但现在ie8的出现让情况复杂了&＃xff0c;ie8不会自动插入&＃xff0c;所以这时候就体现出特性检测的优势了&＃xff0c;因为拥有更细的粒度&＃xff0c;也就更为准确。
3. htmlSerialize&＃xff0c;源码中的注释有些错误&＃xff0c;其实不是包装元素的问题&＃xff0c;而是ie下将link等同于头部空格处理了&＃xff0c;只需要将link挪后面或者在前面加上点什么就可以。
4. style&＃xff0c;getAttribute("style")返回style的字符串&＃xff0c;但ie下是返回一个object&＃xff0c;要取字符串的话用style.cssText。ie8又额外跳了出来&＃xff0c;大家已经适应了ie的特殊性&＃xff0c;这时候ie开始慢慢向标准靠拢&＃xff0c;反而有点不习惯。
5. hrefNormalized&＃xff0c;getAttribute("href")&＃xff0c;ie会在前面加入访问的url。同时&＃xff0c;没错&＃xff0c;你猜对了&＃xff0c;ie8又是例外&＃xff0c;我们应该渐渐感受到微软的诚意&＃xff0c;尽管这一天来得太晚。
6. opacity&＃xff0c;这个应该比较熟悉&＃xff0c;ie下可用滤镜实现&＃xff0c;其余的也可以用特定样式&＃xff0c;如-webkit-opacity&＃xff0c;-moz-opacity。
7. cssFloat&＃xff0c;有一些css属性在css中与js中的名称不完全一样&＃xff0c;这个就是一例&＃xff0c;css中的float&＃xff0c;ie中用styleFloat对应&＃xff0c;其余的用cssFloat对应&＃xff0c;具体这一类的情况我们在以后的获取样式中还会讲到。
8. checkOn&＃xff0c;除webkit引擎之外的浏览器&＃xff0c;checkbox的默认值为"on"。
9. optSelected&＃xff0c;除webkit及ie外的浏览器&＃xff0c;option的selected默认值为true&＃xff0c;目前测试mac下的chrome例外&＃xff0c;估计新版的532.9的webkit修复了这个bug已经。
10. parentNode&＃xff0c;除ie外的浏览器&＃xff0c;removeNode的parentNode为空。
11. deleteExpando&＃xff0c;除ie外的浏览器&＃xff0c;delete一个未定义的属性返回true。
12. checkClone&＃xff0c;除webkit外的浏览器&＃xff0c;调用fragment的cloneNode时&＃xff0c;checkbox的状态并未克隆&＃xff0c;目前测试mac下的chrome例外&＃xff0c;估计新版的532.9的webkit修复了这个bug已经。
13. scriptEval&＃xff0c;除ie外的浏览器可以像操纵普通dom元素一样对script元素使用appendChild&＃xff0c;ie用script.text代替。
14. noCloneEvent&＃xff0c;ie调用cloneNode会将事件响应函数也复制过去&＃xff0c;不是很合理。
15. boxModel&＃xff0c;盒模型就不解释了。
16. submitBubbles&＃xff0c;changeBubbles&＃xff0c;ff用添加onevent属性&＃xff0c;检查是否函数&＃xff0c;其余的用简单的in来检测元素是否支持该事件响应&＃xff0c;这一妙招来自于Detecting event support without browser sniffing。

ext:

var ua &＃61; navigator.userAgent.toLowerCase(),check &＃61; function(r){return r.test(ua);},DOC &＃61; document,isStrict &＃61; DOC.compatMode &＃61;&＃61; "CSS1Compat",isOpera &＃61; check(/opera/),isChrome &＃61; check(/\bchrome\b/),isWebKit &＃61; check(/webkit/),isSafari &＃61; !isChrome && check(/safari/),isSafari2 &＃61; isSafari && check(/applewebkit\/4/), // unique to Safari 2isSafari3 &＃61; isSafari && check(/version\/3/),isSafari4 &＃61; isSafari && check(/version\/4/),isIE &＃61; !isOpera && check(/msie/),isIE7 &＃61; isIE && check(/msie 7/),isIE8 &＃61; isIE && check(/msie 8/),isIE6 &＃61; isIE && !isIE7 && !isIE8,isGecko &＃61; !isWebKit && check(/gecko/),isGecko2 &＃61; isGecko && check(/rv:1\.8/),isGecko3 &＃61; isGecko && check(/rv:1\.9/),isBorderBox &＃61; isIE && !isStrict,isWindows &＃61; check(/windows|win32/),isMac &＃61; check(/macintosh|mac os x/),isAir &＃61; check(/adobeair/),isLinux &＃61; check(/linux/),isSecure &＃61; /^https/i.test(window.location.protocol);

浏览器检测
1. 代码只用变量&＃xff0c;但比jquery&＃xff0c;并无甚不同&＃xff0c;yui亦如是。(浪花只开一时&＃xff0c;但比千年石&＃xff0c;并无甚不同&＃xff0c;流云亦如此&＃xff0c;庆余年中的句子&＃xff0c;个人非常喜欢&＃xff0c;借用一下)
特性检测
1. isStrict&＃xff0c;document.compatMode是否为CSS1Compat来判断是否是严格模式&＃xff0c;但我在一篇文章中看到说这个判断并不准确&＃xff0c;具体记不起来&＃xff0c;留待日后找到再补。
2. isSecure&＃xff0c;采用http还是https访问。

yui:

Y.UA &＃61; function() {var numberify &＃61; function(s) {var c &＃61; 0;return parseFloat(s.replace(/\./g, function() {return (c&＃43;&＃43; &＃61;&＃61; 1) ? &＃39;&＃39; : &＃39;.&＃39;;}));}, win &＃61; Y.config.win, nav &＃61; win && win.navigator, o &＃61; {ie : 0,opera : 0,gecko : 0,webkit : 0,mobile : null,air : 0,caja : nav && nav.cajaVersion,secure : false,os : null}, ua &＃61; nav && nav.userAgent, loc &＃61; win && win.location, href &＃61; loc && loc.href, m;o.secure &＃61; href && (href.toLowerCase().indexOf("https") &＃61;&＃61;&＃61; 0);if (ua) {if ((/windows|win32/i).test(ua)) {o.os &＃61; &＃39;windows&＃39;;} else if ((/macintosh/i).test(ua)) {o.os &＃61; &＃39;macintosh&＃39;;} else if ((/rhino/i).test(ua)) {o.os &＃61; &＃39;rhino&＃39;;}if ((/KHTML/).test(ua)) {o.webkit &＃61; 1;}m &＃61; ua.match(/AppleWebKit\/([^\s]*)/);if (m && m[1]) {o.webkit &＃61; numberify(m[1]);if (/ Mobile\//.test(ua)) {o.mobile &＃61; "Apple";} else {m &＃61; ua.match(/NokiaN[^\/]*|Android \d\.\d|webOS\/\d\.\d/);if (m) {o.mobile &＃61; m[0];}}m&＃61;ua.match(/Chrome\/([^\s]*)/);if (m && m[1]) {o.chrome &＃61; numberify(m[1]); // Chrome} else {m &＃61; ua.match(/AdobeAIR\/([^\s]*)/);if (m) {o.air &＃61; m[0];}}}if (!o.webkit) {m &＃61; ua.match(/Opera[\s\/]([^\s]*)/);if (m && m[1]) {o.opera &＃61; numberify(m[1]);m &＃61; ua.match(/Opera Mini[^;]*/);if (m) {o.mobile &＃61; m[0];}} else { // not opera or webkitm &＃61; ua.match(/MSIE\s([^;]*)/);if (m && m[1]) {o.ie &＃61; numberify(m[1]);} else { // not opera, webkit, or iem &＃61; ua.match(/Gecko\/([^\s]*)/);if (m) {o.gecko &＃61; 1; // Gecko detected, look for revisionm &＃61; ua.match(/rv:([^\s\)]*)/);if (m && m[1]) {o.gecko &＃61; numberify(m[1]);}}}}}}return o; }();

浏览器检测
1. 也是useragent字符串检测&＃xff0c;不过变量的值即表示该浏览器的版本号&＃xff0c;如果取不到版本号则默认为1&＃xff0c;这样避免了如ie6,ie7,ie8之类多个变量&＃xff0c;减少变量使用&＃xff0c;更为清晰。
特性检测
1. secure

dojo:

var d &＃61; dojo; var n &＃61; navigator; var dua &＃61; n.userAgent, dav &＃61; n.appVersion, tv &＃61; parseFloat(dav); if (dua.indexOf("Opera") >&＃61; 0) {d.isOpera &＃61; tv; } if (dua.indexOf("AdobeAIR") >&＃61; 0) {d.isAIR &＃61; 1; } d.isKhtml &＃61; (dav.indexOf("Konqueror") >&＃61; 0) ? tv : 0; d.isWebKit &＃61; parseFloat(dua.split("WebKit/")[1]) || undefined; d.isChrome &＃61; parseFloat(dua.split("Chrome/")[1]) || undefined; d.isMac &＃61; dav.indexOf("Macintosh") >&＃61; 0; var index &＃61; Math.max(dav.indexOf("WebKit"), dav.indexOf("Safari"), 0); if (index && !dojo.isChrome) {d.isSafari &＃61; parseFloat(dav.split("Version/")[1]);if (!d.isSafari || parseFloat(dav.substr(index &＃43; 7)) <&＃61; 419.3) {d.isSafari &＃61; 2;} } if (dua.indexOf("Gecko") >&＃61; 0 && !d.isKhtml && !d.isWebKit) {d.isMozilla &＃61; d.isMoz &＃61; tv; } if (d.isMoz) {d.isFF &＃61; parseFloat(dua.split("Firefox/")[1] || dua.split("Minefield/")[1]) || undefined; } if (document.all && !d.isOpera) {d.isIE &＃61; parseFloat(dav.split("MSIE ")[1]) || undefined;var mode &＃61; document.documentMode;if (mode && mode !&＃61; 5 && Math.floor(d.isIE) !&＃61; mode) {d.isIE &＃61; mode;} } if (dojo.isIE && window.location.protocol &＃61;&＃61;&＃61; "file:") {dojo.config.ieForceActiveXXhr &＃61; true; } d.isQuirks &＃61; document.compatMode &＃61;&＃61; "BackCompat"; d.locale &＃61; dojo.config.locale || (d.isIE ? n.userLanguage : n.language).toLowerCase();

浏览器检测
1. useragent字符串检测。
2. ie8的X-UA-Compatible引入带来了一定的麻烦&＃xff0c;需要综合document.documentMode来考虑。
特性检测
1. isQuirks。
2. locale&＃xff0c;在1.4.2中新加入了语言。

通过以上的代码&＃xff0c;我们可以总结出以下几点&＃xff1a;

浏览器与特性检测并不矛盾&＃xff0c;可以同时存在。
有些框架着重于引擎版本&＃xff0c;有些着重于浏览器版本&＃xff0c;基本上每个引擎都对应于一个主要浏览器&＃xff0c;webkit除外&＃xff0c;有safari和chrome&＃xff0c;我们就单独处理一下。
为了判断兼容性&＃xff0c;一般都有平台信息&＃xff0c;但缺少语言信息。
有各种特性检测&＃xff0c;有对各种特性的支持判断&＃xff0c;也有基于某些特殊浏览器bug的兼容判断。
对新的HTML5的一些特性检测好像都没有&＃xff0c;可以考虑加入。

综合网上的一些代码得出的个人版本

var win &＃61; window, doc &＃61; win.document, nav &＃61; win.navigator, root &＃61; doc.documentElement, div &＃61; doc.createElement(&＃39;div&＃39;), bs, frag, id, ua &＃61;navigator.userAgent, ots &＃61; Object.prototype.toString; function has(p, o) {o &＃61; o || win;if (p in o) {try {delete o[p];} catch (e) {}return p in o;} }; function ver(split) {var s &＃61; ua.split(split)[1];return s && (s &＃61; s.split(&＃39;.&＃39;)) && parseFloat(s.shift() &＃43; &＃39;.&＃39; &＃43; s.join(&＃39;&＃39;)) || 1; }; function hasEvent(e) {e &＃61; "on" &＃43; e;var has &＃61; (e in div);if (!has) {div.setAttribute(e, "return;");has &＃61; typeof div[e] &＃61;&＃61;&＃61; "function";}return has; }; // 为了保证特性检测的独立性&＃xff0c;所以不依靠浏览器判断 div.innerHTML &＃61;&＃39;&＃39;; bs &＃61; { trident : -[1,] ? 0 : ScriptEngineMinorVersion(), // 考虑像mootools那样用window.ActiveXObject来判断&＃xff0c;但实质上这和判断userAgent一样的&＃xff0c;都是可以由用户更改的&＃xff0c;所以取了这个最短判断&＃xff0c;至少目前可用 webkit : !has(&＃39;taintEnabled&＃39;, nav) ? ver(&＃39;WebKit/&＃39;) : 0, gecko : win.crypto && ots.call(win.crypto) &＃61;&＃61;&＃61; &＃39;[object Crypto]&＃39; ? ver(&＃39;rv:&＃39;) : 0, presto : win.opera && ots.call(win.opera) &＃61;&＃61;&＃61; &＃39;[object Opera]&＃39; ? ver(&＃39;Presto/&＃39;) : 0, gchrome : has(&＃39;chrome&＃39;) ? ver(&＃39;Chrome/&＃39;) : 0, safari : /a/.__proto__ &＃61;&＃61; &＃39;//&＃39; ? ver(&＃39;Version/&＃39;) : 0, // mac,win下ok ie : document.documentMode, platform : (nav.platform.toLowerCase().match(/mac|win|linux/) || [&＃39;&＃39;])[0], lang : (nav.language || nav.browserLanguage).toLowerCase(), // feature detect strict : doc.compatMode &＃61;&＃61;&＃61; &＃39;CSS1Compat&＃39;, https : /^https/i.test(win.location.protocol), // xpath: !!doc.evaluate // query: !!doc.querySelector, // style 没有太大意义&＃xff0c;应该使用通用的a.style.cssText querySelector : has(&＃39;querySelector&＃39;, doc), // in opera HTMLElement.prototype will lead an error domExtensible : win.HTMLDivElement && (&＃39;prototype&＃39; in win.HTMLDivElement) ? 2 : win.HTMLElement && (&＃39;prototype&＃39; in win.HTMLElement) ? 1 : 0, msging : has(&＃39;postMessage&＃39;), storage : win.sessionStorage && ots.call(win.sessionStorage) &＃61;&＃61;&＃61; &＃39;[object Storage]&＃39;, db : has(&＃39;openDatabase&＃39;), appCache : has(&＃39;applicationCache&＃39;), worker : win.Worker && ots.call(win.Worker) &＃61;&＃61;&＃61; &＃39;[object Worker]&＃39;, geo : nav.geolocation && ots.call(nav.geolocation) &＃61;&＃61;&＃61; &＃39;[object Geolocation]&＃39;, dragdrop : hasEvent(&＃39;drag&＃39;), offline : has(&＃39;onLine&＃39;, nav), cssTable : 0, rgba : 0, blankTrimmed : div.firstChild.nodeName &＃61;&＃61;&＃61; &＃39;A&＃39;, hrefNormalized : div.getElementsByTagName(&＃39;a&＃39;)[0].getAttribute(&＃39;href&＃39;) &＃61;&＃61;&＃61; &＃39;/a&＃39;, autoTbody : div.getElementsByTagName(&＃39;tbody&＃39;).length, scriptChild : 0, parentRemoved : !div.removeChild(div.firstChild).parentNode, optSeleted : div.getElementsByTagName(&＃39;select&＃39;)[0].appendChild(document.createElement(&＃39;option&＃39;)).selected, chkOn : div.lastChild.value &＃61;&＃61;&＃61; &＃39;on&＃39;, chkCloned : 1, eventCloned : 0 // deleteExpando // boxModel:, // submitBubbles, changeBubbles }; if (div.attachEvent && div.fireEvent) { div.attachEvent("onclick", function click() { bs.eventCloned &＃61; 1; div.detachEvent("onclick", click); }); div.cloneNode(true).fireEvent("onclick"); } frag &＃61; doc.createDocumentFragment(); div.innerHTML &＃61; &＃39;&＃39;; frag.appendChild(div.lastChild); bs.chkClone &＃61; frag.cloneNode(true).lastChild.checked; frag &＃61; doc.createElement(&＃39;script&＃39;); frag.type &＃61; "text/Javascript"; id &＃61; &＃39;_&＃39; &＃43; new Date().getTime(); try { frag.appendChild(doc.createTextNode(&＃39;window.&＃39; &＃43; id &＃43; &＃39;&＃61;1;&＃39;)); } catch (e) { } root.insertBefore(frag, root.firstChild); if (win[id]) { bs.scriptEval &＃61; 1; delete win[id]; } root.removeChild(frag); try { div.style.display &＃61; &＃39;table&＃39;; bs.cssTable &＃61; div.style.display &＃61;&＃61;&＃61; &＃39;table&＃39;; } catch(e) { } try { div.style.color &＃61; &＃39;rgba(0,0,0,1)&＃39;; bs.rgba &＃61; !div.style.color.indexOf(&＃39;rgba&＃39;); } catch(e) { } div &＃61; flag &＃61; null;

浏览器检测
1. 检测trident, webkit, gecko和presto这四大浏览器引擎及版本
2. 检测chrome, safari等常用浏览器及版本
3. trident属性和ie属性的区别&＃xff0c;主要为了兼容ie8引入的X-UA-Compatible&＃xff0c;trident指的是浏览器引擎版本&＃xff0c;ie指的是当前浏览器渲染版本&＃xff0c;通常以ie为比较标准。
4. 检测win, mac, linux平台
5. 加入当前浏览器使用语言
特性检测
1. strict, 是否使用严格模式。
2. https, 是否使用https协议。
3. querySelector, 是否提供querySelector函数。
4. domExtensible, dom元素是否允许扩展&＃xff0c;0不允许&＃xff0c;1只允许HTMLElement&＃xff0c;2可扩展各个HTMLElement子类。
5. msging, 是否支持跨文档通信。
6. storage, 是否支持本地存储。
7. db, 是否支持本地数据库。
8. worker, 是否支持worker。
9. geo, 是否支持geolocation。
10. dragdrop, 是否支持原生拖放。
11. offline, 是否支持离线检测。
12. cssTable, 是否支持css的table布局。
13. rgba, 是否支持rgba。
14. blankTrimmed, innerHTML是否会去掉空格。
15. hrefNormalized, href值是否保持不变。
16. autoTbody, 是否自动插入tbody。
17. scriptChild&＃xff0c;除ie外的浏览器可以像操纵普通dom元素一样对script元素使用appendChild&＃xff0c;ie用script.text代替。
18. parentRemoved&＃xff0c;除ie外的浏览器&＃xff0c;removeNode的parentNode为空。
19. optSelected&＃xff0c;除webkit及ie外的浏览器&＃xff0c;option的selected默认值为true&＃xff0c;目前测试mac下的chrome例外&＃xff0c;估计新版的532.9的webkit修复了这个bug已经。
20. chkOn&＃xff0c;除webkit引擎之外的浏览器&＃xff0c;checkbox的默认值为"on"。
21. chkCloned&＃xff0c;除webkit外的浏览器&＃xff0c;调用fragment的cloneNode时&＃xff0c;checkbox的状态并未克隆&＃xff0c;目前测试mac下的chrome例外&＃xff0c;估计新版的532.9的webkit修复了这个bug已经。
22. eventCloned&＃xff0c;ie调用cloneNode会将事件响应函数也复制过去&＃xff0c;不是很合理。