源码解读jQ中浏览器兼容模块support

前端技术 2023/09/03 JavaScript

前言

jQuery的属性support是判断浏览器之间是否兼容的模块 ，该模块包含了leadingWhitespace，tbody，htmlSerialize，style，hrefNormalized，opacity，cssFloat，checkOn，optSelected，getSetAttribute….等兼容问题，所有的这些属性也只是jQuery内部会用到，因为jQ内部一些模块需要对这些东西进行判断， 就直接写成了一个support模块， 可以供我们， 但是我们写代码的时基本都没用到啊，

今天再把这些玩意儿过一下， 测试的浏览器为FF，CHROME，IE11， IE6-IE10是用IE11模拟的：

$.support.leadingWhitespace　　———— IE中自动去空格

$.support.checkOn   —-chrome中radio默认值为checkOn

$.support.tbody  —-IE通过innerHTML自动生成tbody

$.support.htmlSerialize —–　　标准浏览器会自动生成link标签

$.support.style　　—-IE67中getAttriute会获取各种类型的数据….

$.support.opacity　　—- IE678不支持opacity

$.support.cssFloat　　 —-cssFloat标准浏览器支持的，IE要用styleFloat

$.support.optSelected　　—–浏览器并不会设置默认的option

$.support.getSetAttribute　　—-getSetAttribute在浏览器之间的兼容

$.support.html5Clone　　　—- 复制标签的问题

$.support.boxModel　　—- 是否支持盒模型

$.support.submitBubbles　　—-冒泡

$.support.changeBubbles　　—-冒泡

$.support.focusinBubbles　　—-冒泡

$.support.deleteExpando 　　—–IE的DOM元素是COM组件， 不能delete组件的属性

$.support.noCloneEvent　　 —-复制元素的事件

$.support.reliableHiddenOffsets 　　—-table元素中tr内td的问题；

$.support.boxSizing　　—是否支持boxSizing

$.support.doesNotIncludeMarginInBodyOffset　　—-body不会包含margin的问题（算不算问题呢？）

$.support.pixelPosition 　　—-获取样式返回的是否是像素值

$.support.boxSizingReliable　　—-boxSizing是否可用

$.support.reliableMarginRight    —-chrome中margin的bug

$.support.inlineBlockNeedsLayout    —-IE中layout的问题

$.support.shrinkWrapBlocks    —-IE6中自动扩大宽高的问题

$.support.leadingWhitespace属性

<html>
  <head>
    <meta charset=\"utf-8\" />
    <title>兼容</title>
  </head>
  <body>
    <script type=\"text/javascript\">

      window.l = (function() {
        var el = document.createElement(\"div\"), index = 0;
        el.style.cssText = \"padding:10px;position:fixed;top:0;right:0;width:10%;border:1px solid #f00;\";
        return function(message) {
          if( message ) {
            var span = document.createElement(\"span\");
            span.innerHTML = (++index) + \"信息:<br>\"+ message+\"<br>\";
            el.appendChild( span );
          };
          //IE低版本直接通过createElement创建的元素有parentNode;
          if( !el.parentNode || (el.parentNode.toString() === \"[object]\") ) {
            document.body.appendChild(el);
          };
          return l;
        };
      })();

    </script>
    IE678中自动过滤了元素前后的空格,
    而且空格不包含在childNodes里面,
    <script type=\"text/javascript\">
      var el = document.createElement(\"div\");
      el.innerHTML = \" <div id=\\\"null\\\"> </div> \";
      l(el.childNodes.length);
    </script>
  </body>
</html>

标准浏览器中是遵守用户输入， el应该包含三个节点 ：[\"\", \"<div id=\\\"null\\\"> </div>\", \"\"]节点;

IE678中却只有1个节点， 这个节点就是那个DIV:

$.support.checkOn属性

标准浏览器中的checkbox默认value为”on”,IE5678也都是”on”, 但是在某些webkit中checkbox的值默认为”\"字符串，现在的浏览器版本都很高了， 基本没有这个问题, 如果你有chrome低版本的话可以用下面这个demo测试看看有没有问题：

<html>
  <head>
    <meta charset=\"utf-8\" />
    <title>兼容</title>
  </head>
  <body>
    <script type=\"text/javascript\">

      window.l = (function() {
        var el = document.createElement(\"div\"), index = 0;
        el.style.cssText = \"padding:10px;position:fixed;top:0;right:0;width:10%;border:1px solid #f00;\";
        return function(message) {
          message = message.toString();
          if( message ) {
            var span = document.createElement(\"span\");
            span.innerHTML = (++index) + \"信息:<br>\"+ message+\"<br>\";
            el.appendChild( span );
          };
          //IE低版本直接通过createElement创建的元素有parentNode;
          if( !el.parentNode || (el.parentNode.toString() === \"[object]\") ) {
            document.body.appendChild(el);
          };
          return l;
        };
      })();

    </script>
    <input id=\"ck\" type=\'checkbox\'/>
    <script type=\"text/javascript\">
      var el = document.getElementById(\"ck\");
      //标准浏览器有change事件;
      el.onchange = function() {
        l(el.value);
        l(ck.checked)
      }
      //IE中的万能事件propertychange;
      el.onpropertychange = function() {
        l(el.value);
        l(ck.checked)
      }
      l(el.value);
    </script>
  </body>
</html>

$.support.tbody属性

在IE6和IE7中新建table会自动创建tbody元素;

如果我们为创建的table添加tr或者添加td， 那么所有的浏览器都会自动创建tbody;

如果是动态创建的table和tr，把tr添加到tbody中，那么tbod根本不会出来， 所有浏览器都遵循开发者的操作(浏览器的心思真的不好猜测啊)

<html>
  <head>
    <meta charset=\"utf-8\" />
    <title>兼容</title>
  </head>
  <body>
    <script type=\"text/javascript\">

      window.l = (function() {
        var el = document.createElement(\"div\"), index = 0;
        el.style.cssText = \"padding:10px;position:fixed;top:0;right:0;width:10%;border:1px solid #f00;\";
        return function(message) {
          message = message.toString();
          if( message ) {
            var span = document.createElement(\"span\");
            span.innerHTML = (++index) + \"信息:<br>\"+ message+\"<br>\";
            el.appendChild( span );
          };
          //IE低版本直接通过createElement创建的元素有parentNode;
          if( !el.parentNode || (el.parentNode.toString() === \"[object]\") ) {
            document.body.appendChild(el);
          };
          return l;
        };
      })();

    </script>
    <div id=\"tb\"></div>
    <div id=\"tb2\"></div>
    <div id=\"tb3\"></div>
    <script type=\"text/javascript\">
      var el = document.getElementById(\"tb\");
      el.innerHTML = \"<table></table>\"
      //IE67中会输出1， 标准浏览器遵循用户输入，不会是自动生成tbody，所以tobdy的length是0
      l(el.getElementsByTagName(\"tbody\").length);
    </script>
    <script>
      var el = document.getElementById(\"tb2\");
      el.innerHTML=\"<table><tr>111</tr></table>\";
      //无论是标准还是IE67都会自动生成tbody标签
      l(el.getElementsByTagName(\"tbody\").length);
    </script>
    <script>
      var el = document.getElementById(\"tb3\");
      el.innerHTML=\"<table><td>111</td></table>\";
      //无论是标准还是IE67都会自动生成tbody标签
      l(el.getElementsByTagName(\"tbody\").length);
    </script>
    <script>
      var tb = document.createElement(\"table\");
      var tr = document.createElement(\"tr\");
      tr.innerHTML = \"trtrtr\";
      tb.appendChild(tr);
      document.getElementsByTagName(\"body\")[0].appendChild(tb);
    </script>
  </body>
</html>

代码执行完毕以后你会看到， 当table里没有元素的时候， chrome没有自动产生tbody， 如果你不按照正常的写法写table， 而是这样

\"<table><tr>111</tr></table>\";

产生的HTML变成这样”111<table><tr></tr></table>“，  在jQ中你这样写$(“<table><tr>111</tr></table>”)， 生成的HTML也是这样的[\"111\",\"<table><tr></tr></table>\"]，所以再三强调写html标签的嵌套要符合标准….

在IE中又是例外一回事，通过innerHTML的方式会自动添加tbody， 而且你标签嵌套错了他也不管你，通过appendChild的方式跟其他浏览器一样不会主动生成tbody；

$.support.htmlSerialize

IE678浏览器中不能够通过innerHTML动态生成link标签， 要通过新建标签的形式创建：

<html>
  <head>
    <meta charset=\"utf-8\" />
    <title>兼容</title>
  </head>
  <body>
    <script type=\"text/javascript\">

      window.l = (function() {
        var el = document.createElement(\"div\"), index = 0;
        el.style.cssText = \"padding:10px;position:fixed;top:0;right:0;width:10%;border:1px solid #f00;\";
        return function(message) {
          message = message.toString();
          if( message ) {
            var span = document.createElement(\"span\");
            span.innerHTML = (++index) + \"信息:<br>\"+ message+\"<br>\";
            el.appendChild( span );
          };
          //IE低版本直接通过createElement创建的元素有parentNode;
          if( !el.parentNode || (el.parentNode.toString() === \"[object]\") ) {
            document.body.appendChild(el);
          };
          return l;
        };
      })();

    </script>
    <div class=\"bounce animated infinite\">
      bounce
    </div>
    <div id=\"link\"></div>
    <script type=\"text/javascript\">
      var eLink = document.getElementById(\"link\");
      eLink.innerHTML = \'<link href=\"http://cdn.bootcss.com/animate.css/3.3.0/animate.css\" rel=\"stylesheet\">\';
    </script>
  </body>
</html>

虽然link标签多数都可以通过innerHTML生成， 但是我们要通过innerHTML生成script标签是不可行的：

当前1/2页 12下一页阅读全文

本文地址：https://www.stayed.cn/item/7355

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案