首页
Javascript
Html
Css
Node.js
Electron
移动开发
小程序
工具类
服务端
浏览器相关
前端收藏
其他
关于
公司注册

jQuery.support源码分析(检测浏览器兼容)

2013年05月08日 发布 阅读(2524) 作者：Jerman

jquery.support主要是检测浏览器兼容性，支持力度的方法，用于展示不同浏览器各自特性和bug的属性集合。作为一个静态成员，提供给jquery内部函数，告诉他们某些功能是否能用。避免了以往通过检测浏览器版本做修改。

可以直接调用jQuery.support来检测某些功能，通过查看其源代码我们可以更深入的了解各个浏览器之间的区别。特别是针对IE，还有webkit的bug，都能让我们受益匪浅。

兼容各种主流浏览器是JavaScript库的必修课之一，一般来说检测浏览器有两种方法：

检测navigator.userAgent，用户代理检测法
检测浏览器的功能特性，即功能特性检测法
而jQuery1.3开始采用的就是功能特性检测法，以下是针对最新的jquery1.9.1版本，添加的注释。

  1. // 浏览器各自特性和bug的属性集合，功能特性检测/支持
  2. jQuery.support = (function () {
  3.     // 声明变量
  4.     var support, all, a,
  5.         input, select, fragment,
  6.         opt, eventName, isSupported, i,
  7.         div = document.createElement("div");
  9.     // Setup
  10.     // 设置class样式
  11.     div.setAttribute("className", "t");
  12.     // 插入HTML
  13.     div.innerHTML = "  <link/><table></table><a href='/a'>a</a><input type='checkbox'/>";
  15.     // Support tests won't run in some limited or non-browser environments
  16.     // 获取元素
  17.     all = div.getElementsByTagName("*");
  18.     a = div.getElementsByTagName("a")[0];
  20.     // 检测是否支持最基本检测
  21.     if (!all || !a || !all.length) {
  22.         return {};
  23.     }
  25.     // First batch of tests
  26.     // 创建select元素
  27.     select = document.createElement("select");
  29.     // 创建option元素并插入到select中
  30.     opt = select.appendChild(document.createElement("option"));
  32.     // 获取input元素
  33.     input = div.getElementsByTagName("input")[0];
  35.     // 设置CSS样式
  36.     // cssText：设置样式
  37.     // 说明：在IE中最后一个分号会被删掉,可以添加一个分号来解决这个问题
  38.     // 例如: Element.style.cssText += ’;width:100px;height:100px;top:100px;left:100px;’
  39.     a.style.cssText = "top:1px;float:left;opacity:.5";
  41.     // support（支持）对象
  42.     support = {
  43.         // Test setAttribute on camelCase class. If it works, we need attrFixes when doing get/setAttribute (ie6/7)
  44.         // 验证一些属性是否支持使用get/setAttribute方法，不支持返回true，支持返回false
  45.         // 通过setAttribute添加class值是否成功来检测,IE6~7支持，其他浏览器不支持
  46.         getSetAttribute:div.className !== "t",
  48.         // IE strips leading whitespace when .innerHTML is used
  49.         // 检测节点类型是否为文本节点 成功返回true，失败返回false
  50.         // 使用innerHTML，IE会自动剔除HTML代码头部的空白符
  51.         leadingWhitespace:div.firstChild.nodeType === 3,
  53.         // Make sure that tbody elements aren't automatically inserted
  54.         // IE will insert them into empty tables
  55.         // 验证是否存在tbody标签，不存在返回true，存在返回false
  56.         // 确保tbody元素不会自动插入（IE6~7会自动插入的空tbody）
  57.         tbody:!div.getElementsByTagName("tbody").length,
  59.         // Make sure that link elements get serialized correctly by innerHTML
  60.         // This requires a wrapper element in IE
  61.         // 验证innerHTML插入链接元素是否可被序列化，成功则返回true，失败返回false
  62.         // 所谓序列化是指：可被读取的一种存储标准，在IE6~8中返回false。
  63.         htmlSerialize:!!div.getElementsByTagName("link").length,
  65.         // Get the style information from getAttribute
  66.         // (IE uses .cssText instead)
  67.         // 验证getAttribute("style")是否返回元素的行内样式，成功返回true,失败返回false
  68.         // 在IE6~8中为false，因为他用cssText代替
  69.         style:/top/.test(a.getAttribute("style")),
  71.         // Make sure that URLs aren't manipulated
  72.         // (IE normalizes it by default)
  73.         // 验证getAttribute("href")返回值是否原封不动，成功返回true，失败返回false
  74.         // 在IE6~7中会返回false，因为他的URL已常规化。
  75.         hrefNormalized:a.getAttribute("href") === "/a",
  77.         // Make sure that element opacity exists
  78.         // (IE uses filter instead)
  79.         // Use a regex to work around a WebKit issue. See #5145
  80.         // 验证浏览器是否能正确解析opacity,成功返回true,失败返回false
  81.         // 在IE6~8中返回false，因为他用alpha滤镜代替。
  82.         opacity:/^0.5/.test(a.style.opacity),
  84.         // Verify style float existence
  85.         // (IE uses styleFloat instead of cssFloat)
  86.         // 验证cssFloat是否存在，成功返回true，失败返回false
  87.         // 在IE6~8中返回false,他用styleFloat代替
  88.         cssFloat:!!a.style.cssFloat,
  90.         // Check the default checkbox/radio value ("" on WebKit; "on" elsewhere)
  91.         // 验证checkbox的默认value是否为'on',成功返回true,失败返回false
  92.         // safair默认为'' 空字符串
  93.         checkOn:!!input.value,
  95.         // Make sure that a selected-by-default option has a working selected property.
  96.         // (WebKit defaults to false instead of true, IE too, if it's in an optgroup)
  97.         // 验证创建的select元素的第一个option元素是否会默认选中, 成功返回true，失败返回false
  98.         // FF，Chrome返回true,IE6~10返回false
  99.         // 注意:option元素的父元素不一定是select，也有可能是optgroup
  100.         optSelected:opt.selected,
  102.         // Tests for enctype support on a form (#6743)
  103.         // 验证创建form的enctype属性是否存在，存在返回true，不存在返回fasle(IE6~9,均存在)
  104.         // enctype:设置表单的MIME编码,默认编码格式是application/x-www-form-urlencoded,不能用于文件上传；multipart/form-data，才能完整的传递文件数据
  105.         enctype:!!document.createElement("form").enctype,
  107.         // Makes sure cloning an html5 element does not cause problems
  108.         // Where outerHTML is undefined, this still works
  109.         // 验证是否支持html5节点复制，成功返回ture，失败返回false
  110.         // 失败：复制节点cloneNode(true).innerHTML返回一个空字符串
  111.         html5Clone:document.createElement("nav").cloneNode(true).outerHTML !== "<:nav></:nav>",
  113.         // jQuery.support.boxModel DEPRECATED in 1.8 since we don't support Quirks Mode
  114.         // 验证页面和浏览器是否以W3C CSS盒式模型来渲染，而非怪异模式下。IE6~7的怪癖模式会返回false
  115.         boxModel:document.compatMode === "CSS1Compat",
  117.         // Will be defined later
  118.         // 稍后将定义
  119.         deleteExpando:true,
  120.         noCloneEvent:true,
  121.         inlineBlockNeedsLayout:false,
  122.         shrinkWrapBlocks:false,
  123.         reliableMarginRight:true,
  124.         boxSizingReliable:true,
  125.         pixelPosition:false
  126.     };
  128.     // Make sure checked status is properly cloned
  129.     // 检测单选框选中状态能否正确克隆
  130.     // 在IE6~9中会返回false,无法正确克隆
  131.     // (1) 设置checkbox的checked为true
  132.     input.checked = true;
  133.     // (2) cloneNode克隆（复制）一份checkbox，获取他的checked值
  134.     support.noCloneChecked = input.cloneNode(true).checked;
  136.     // Make sure that the options inside disabled selects aren't marked as disabled
  137.     // (WebKit marks them as disabled)
  138.     // 检测select元素设置为disabled后，其所有option子元素是否也会被设置为disabled
  139.     // (1)禁用下拉列表
  140.     select.disabled = true;
  141.     // (2)获取下拉列表子元素的disabled是否为true
  142.     // 测试：IE FF Chrome Safair Opera 的opt.disabled都为false，说明option不会被设置为disabled
  143.     // 其他：部分webkit会被设置为disabled,需要老版本的chrome支持。
  144.     support.optDisabled = !opt.disabled;
  146.     // Support: IE<9
  147.     // 检测是否能删除附加在DOM Element 上的属性或数据
  148.     // 在IE6~7中返回false,若事先声明这个属性，那么在IE8返回true，否者返回false
  149.     try {
  150.         delete div.test;
  151.     } catch (e) {
  152.         support.deleteExpando = false;
  153.     }
  155.     // Check if we can trust getAttribute("value")
  156.     // 检测input元素被设置为radio类型后，是否仍然保持原先的值 保持成功返回true，失败返回false
  157.     // 在IE6~9和opera中返回false，其他返回true
  158.     input = document.createElement("input");
  159.     input.setAttribute("value", "");
  160.     support.input = input.getAttribute("value") === "";
  162.     // Check if an input maintains its value after becoming a radio
  163.     input.value = "t";
  164.     input.setAttribute("type", "radio");
  165.     //IE返回on
  166.     support.radioValue = input.value === "t";
  168.     // #11217 - WebKit loses check when the name is after the checked attribute
  169.     // 先“选中”然后在“名称”,顺序要点，在老版本的chroem16和safair 下有兼容问题
  170.     input.setAttribute("checked", "t");
  171.     input.setAttribute("name", "t");
  172.     // 创建一个文档碎片
  173.     fragment = document.createDocumentFragment();
  175.     // 将input元素插入到碎片中
  176.     fragment.appendChild(input);
  178.     // Check if a disconnected checkbox will retain its checked
  179.     // value of true after appended to the DOM (IE6/7)
  180.     // 检测(使用setAttribute)被添加到DOM中的checkbox是否仍然保留原先的选中状态 成功返回true,失败返回false
  181.     // 在IE6~7中，返回false
  182.     // 其他：（1） safair下 若先未设置"名称"，返回true
  183.     // 其他：（2） safair下 若设置"名称"，则返回false
  184.     support.appendChecked = input.checked;
  186.     // WebKit doesn't clone checked state correctly in fragments
  187.     // 检测fragment中的checkbox的选中状态能否被复制 成功返回true,失败返回false
  188.     // 在IE6~7中 失败返回false
  189.     // 其他：（1） safair下 若先设置"名称"后"选中"返回true
  190.     // 其他：（2） safair下 若先设置"选中"后"名称"返回false
  191.     support.checkClone = fragment.cloneNode(true).cloneNode(true).lastChild.checked;
  193.     // Support: IE<9
  194.     // Opera does not clone events (and typeof div.attachEvent === undefined).
  195.     // IE9-10 clones events bound via attachEvent, but they don't trigger with .click()
  196.     // 检测克隆 DOM Element 是否会连同Element一起克隆(复制),成功返回false，失败返回true
  197.     // IE6~8克隆会复制事件,标准浏览器返回false
  198.     // (1)IE的注册事件
  199.     if (div.attachEvent) {
  200.         div.attachEvent("onclick", function () {
  201.             support.noCloneEvent = false;
  202.         });
  203.         // (2)克隆DOM Element并执行onclick事件
  204.         div.cloneNode(true).click();
  205.     }
  207.     // Support: IE<9 (lack submit/change bubble), Firefox 17+ (lack focusin event)
  208.     // Beware of CSP restrictions (https://developer.mozilla.org/en/Security/CSP), test/csp.php
  209.     // 检测(嗅探)事件是否支持
  210.     // 其他： IE6~7不支持submitBubbles和changeBubbles，支持focusinBubbles. IE8~9均支持
  211.     for (i in { submit:true, change:true, focusin:true }) {
  212.         div.setAttribute(eventName = "on" + i, "t");
  213.         //eventName in window 低版本iE6~7浏览器检测，返回false
  214.         //高版本IE8~9浏览器检测
  215.         support[i + "Bubbles"] = eventName in window || div.attributes[eventName].expando === false;
  216.     }
  217.     //IE9的问题，对于克隆的元素清除掉其background时，其原型的background也会被清除
  218.     div.style.backgroundClip = "content-box";
  219.     div.cloneNode(true).style.backgroundClip = "";
  220.     // 检测原型的background是否被清除
  221.     support.clearCloneStyle = div.style.backgroundClip === "content-box";
  223.     // Run tests that need a body at doc ready
  224.     // 页面加载完成之后开始执行
  225.     jQuery(function () {
  226.         var container, marginDiv, tds,
  227.         // 声明保存一种样式（目的是重置样式）
  228.             divReset = "padding:0;margin:0;border:0;display:block;box-sizing:content-box;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;",
  229.         // 获取body元素
  230.             body = document.getElementsByTagName("body")[0];
  232.         if (!body) {
  233.             // Return for frameset docs that don't have a body
  234.             // 框架的页面没有body元素，返回空值
  235.             return;
  236.         }
  237.         // 创建DOM Element元素(div)
  238.         container = document.createElement("div");
  239.         // 设置 DIV 样式
  240.         container.style.cssText = "border:0;width:0;height:0;position:absolute;top:0;left:-9999px;margin-top:1px";
  241.         // 将DIV插入到body第一行
  242.         body.appendChild(container).appendChild(div);
  244.         // Support: IE8
  245.         // Check if table cells still have offsetWidth/Height when they are set
  246.         // to display:none and there are still other visible table cells in a
  247.         // table row; if so, offsetWidth/Height are not reliable for use when
  248.         // determining if an element has been hidden directly using
  249.         // display:none (it is still safe to use offsets if a parent element is
  250.         // hidden; don safety goggles and see bug #4512 for more information).
  251.         // 插入table表格
  252.         div.innerHTML = "<table><tr><td></td><td>t</td></tr></table>";
  253.         // 获取TD
  254.         tds = div.getElementsByTagName("td");
  255.         // 检测none状态下，offsetHeight值是否正确,正确返回true，失败返回false
  256.         // 在IE6~8下返回false
  257.         // (1)设置TD[0]样式
  258.         tds[0].style.cssText = "padding:0;margin:0;border:0;display:none";
  259.         // (2)检测TD[0]的内容高度是否为0
  260.         isSupported = (tds[0].offsetHeight === 0);
  261.         // 检测TD初始化，相邻的td的隐藏，offsetHeight值是否正确,正确返回true，失败返回false
  262.         // 在IE6~8返回false
  263.         // 设置TD[0]display(显示)初始化,相邻的td隐藏
  264.         tds[0].style.display = "";
  265.         tds[1].style.display = "none";
  267.         // Support: IE8
  268.         // Check if empty table cells still have offsetWidth/Height
  269.         support.reliableHiddenOffsets = isSupported && (tds[0].offsetHeight === 0);
  271.         // Check box-sizing and margin behavior
  272.         // 清理div子元素
  273.         div.innerHTML = "";
  274.         // 设置盒模型以及margin等行为
  275.         div.style.cssText = "box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;padding:1px;border:1px;display:block;width:4px;margin-top:1%;position:absolute;top:1%;";
  276.         // 检测是否符盒模型(通过offsetWidth来判断)
  277.         // 在IE6~7中返回false 返回值为6
  278.         support.boxSizing = (div.offsetWidth === 4);
  280.         // 字面翻译：body偏移不是因为margin影响 (未验证)
  281.         support.doesNotIncludeMarginInBodyOffset = (body.offsetTop !== 1);
  283.         // Use window.getComputedStyle because jsdom on node.js will break without it.
  284.         // 未来判断(向上检测)
  285.         // 判断是否支持getComputedStyle方法
  286.         // getComputedStyle:获取当前元素所有最终使用的CSS属性值,返回的是一个CSS样式声明对象
  287.         if (window.getComputedStyle) {
  288.             // 检测图层定位（像素位置）是否有误,正确返回false 错误返回true
  289.             support.pixelPosition = (window.getComputedStyle(div, null) || {}).top !== "1%";
  290.             // 检测盒模型是否可靠
  291.             support.boxSizingReliable = (window.getComputedStyle(div, null) || { width:"4px" }).width === "4px";
  293.             // Check if div with explicit width and no margin-right incorrectly
  294.             // gets computed margin-right based on width of container. (#3333)
  295.             // Fails in WebKit before Feb 2011 nightlies
  296.             // WebKit Bug 13343 - getComputedStyle returns wrong value for margin-right
  297.             // 为处理某个BUG存在,块级元素margin right兼容问题
  298.             // webkit 返回错误的值
  299.             // 创建一个div元素
  300.             marginDiv = div.appendChild(document.createElement("div"));
  301.             // 样式声明或（重置)
  302.             marginDiv.style.cssText = div.style.cssText = divReset;
  303.             marginDiv.style.marginRight = marginDiv.style.width = "0";
  304.             div.style.width = "1px";
  306.             support.reliableMarginRight =
  307.                 !parseFloat((window.getComputedStyle(marginDiv, null) || {}).marginRight);
  308.         }
  309.         // FF不支持zoom 检测IE6~7 版本
  310.         if (typeof div.style.zoom !== core_strundefined) {
  311.             // Support: IE<8
  312.             // Check if natively block-level elements act like inline-block
  313.             // elements when setting their display to 'inline' and giving
  314.             // them layout
  315.             div.innerHTML = "";
  316.             div.style.cssText = divReset + "width:1px;padding:1px;display:inline;zoom:1";
  317.             // 检测IE6~7下，块元素在display:inline并拥有layout属性，是否会按inline-block显示
  318.             support.inlineBlockNeedsLayout = (div.offsetWidth === 3);
  320.             // Support: IE6
  321.             // Check if elements with layout shrink-wrap their children
  322.             // 检测父元素拥有layout属性和固定的width/height，是否会被子元素撑大。成功返回true失败,返回false
  323.             // 在IE6中返回true，(值是7)
  324.             div.style.display = "block";
  325.             div.innerHTML = "<div></div>";
  326.             div.firstChild.style.width = "5px";
  327.             support.shrinkWrapBlocks = (div.offsetWidth !== 3);
  329.             if (support.inlineBlockNeedsLayout) {
  330.                 // Prevent IE 6 from affecting layout for positioned elements #11048
  331.                 // Prevent IE from shrinking the body in IE 7 mode #12869
  332.                 // Support: IE<8
  333.                 body.style.zoom = 1;
  334.             }
  335.         }
  336.         // 移除container元素 垃圾回收,避免内存泄露
  337.         body.removeChild(container);
  339.         // Null elements to avoid leaks in IE
  340.         container = div = tds = marginDiv = null;
  341.     });
  342.     // IE下，创建DOM Element对象，如果没有append到页面中，刷新页面，这部分内存是不会回收的
  343.     // 不需要的DOM Element，需要做结束清理
  344.     // 释放dom元素占用的内存
  345.     // 释放DOM Element对象,垃圾清理，内存回收
  346.     // Null elements to avoid leaks in IE
  347.     all = select = fragment = opt = a = input = null;
  348.     // 返回结果
  349.     return support;
  350. })();
版权声明：本站文章除特别声明外，均采用署名-非商业性使用-禁止演绎 4.0 国际 许可协议，如需转载，请注明出处
  • jQuery对象中类数组的概念及操作

    什么是类数组？相信我们对function方法的arguments很熟悉，arguments就像一个数组，但instanceof Array检测会返回false,可以称为“类数组”。

    发布：2014-04-10 阅读(2627)

  • jquery使用不当导致内存泄漏

    jQuery是现在最流行的js库，一般情况下我们都会放心的使用它，不用考虑其内存泄漏的问题。 最近的项目是基于MVC模式的管理系统，期间要采用ajax不断轮询服务器，以获得最新的数据，这时候使用jQuery的时候就要注意了，一不小心俺们最可爱的IE内存就up up up了~~

    发布：2013-12-10 阅读(2935)

  • jQuery.support源码分析(检测浏览器兼容)

    jquery.support主要是检测浏览器兼容性，支持力度的方法，用于展示不同浏览器各自特性和bug的属性集合。作为一个静态成员，提供给jquery内部函数，告诉他们某些功能是否能用。避免了以往通过检测浏览器版本做修改。

    发布：2013-05-08 阅读(2524)

  • jQuery跳出each循环(替换break,continue)

    jQuery each循环中，如果要实现类似break或continue的功能，不用跟原生javascript for循环一样用break或continue了，而必须用reaturn false、return true

    发布：2012-11-14 阅读(2787)

© 2018 IMQIANDUAN.COM 粤ICP备18143223号