Question

我需要创建一个与IE7兼容的现有Web应用程序。

代码广泛使用element.hasAttribute，IE7存在此方法的问题。

Object不支持属性或方法'hasattribute'

我正在尝试检查代码是否input元素定义了hasAttribute方法，如果没有，我会尝试将其添加到所有input元素。

//create an input element variable << works fine
var myInput = document.createElement("input");

//see if it has the 'hasAttribute' method << condition works fine
if (('hasAttribute' in myInput)==false)
{

    //get all input elements into objInputElements <<works fine
    var objInputElements=document.getElementsByTagName("input");

    // MORE CODE NEEDED - To implement a hasAttribute function for all 
    // elements in the array probably using something
    // like: !!element[attributeName] which works in IE7. See link and notes below.
}

This article描述了如何定义单独的函数来执行此操作。但是，如果未定义元素，我想将hasattribute方法添加到元素中。（这样我就不需要更改当前编写的所有代码）

重要说明：有＆gt;因此，表单中有1000个隐藏的输入字段，'hasattribute'方法需要以非常有效的方式添加到元素中。

请告诉我如何实现这一目标。谢谢！

Answer 1

由于不支持Element.prototype IE＆lt; 8，没有有效的方法来填充hasAttribute。低效的方式（如果你想避免填充）将是这样的（在所有输入加载后放置）：

<input data-abc="" />
<script>

if (!window.Element || !window.Element.prototype || !window.Element.prototype.hasAttribute) {

(function () {
    function hasAttribute (attrName) {
        return typeof this[attrName] !== 'undefined'; // You may also be able to check getAttribute() against null, though it is possible this could cause problems for any older browsers (if any) which followed the old DOM3 way of returning the empty string for an empty string (yet did not possess hasAttribute as per our checks above). See https://developer.mozilla.org/en-US/docs/Web/API/Element.getAttribute
    }
    var inputs = document.getElementsByTagName('input');
    for (var i = 0; i < inputs.length; i++) {
        inputs[i].hasAttribute = hasAttribute;
    }
}());

}

var inputs = document.getElementsByTagName('input');
document.write(
    'has?' + inputs[0].hasAttribute('abc') // false
);
document.write(
    'has?' + inputs[0].hasAttribute('data-abc') // true
);

</script>

Answer 2

我知道这是一个老帖子，也许没有其他人使用IE7但是如果像我一样你需要它（并且需要使用ajax或类似的东西）这是我的建议。

也许我们可以改进创建getElementsByTagName或getElementById代理的性能来完成这个技巧，并且这增加了对在运行时创建的动态元素的支持。

也许是这样的：

if (!window.Element || !window.Element.prototype || !window.Element.prototype.hasAttribute) {
   (function (document) {
      var originalGetElementById = document.getElementById;
      var originalGetElementsByTagName = document.getElementsByTagName;

      // The HasAttribute function.
      function hasAttribute (attrName) {
         return typeof this[attrName] !== 'undefined';
      }

      // Add the HasAttribute to the element if is not present yet.
      function attachFunction (element) {
         if (element && !element.hasAttribute) {
            element.hasAttribute = hasAttribute;
         }
         return element;
      }

      // Proxy of the document.getElementById
      document.getElementById = function (elementId) {
         var element = originalGetElementById(elementId);
         return attachFunction(element);
      }

      // Proxy of the document.getElementsByTagName
      document.originalGetElementsByTagName = function (tagName) {
         var elements = originalGetElementsByTagName(tagName);
         for(var i = 0, len = elements.length; i < len; i++) {
            attachFunction(element[i]);
         }
         return elements;
      }
   }(document));
}

此功能可以在IE中包含条件标记的单独javascript文件中使用：

<!--[if lt IE 8]>
<script src="ie7fixs.js" type="text/javascript" ></script>
<![endif]-->

然后只使用document.getElementsByTagName或document.getElementById。

var inputs = document.getElementsByTagName('input');
document.write(
    'has?' + inputs[0].hasAttribute('abc') // false
);
document.write(
    'has?' + inputs[0].hasAttribute('data-abc') // true
);

Answer 3

试一试：

//if  po is object then for IE:
if (!po.hasAttribute) po.hasAttribute=function(attr) {
  return this.getAttribute(attr)!=null
};

JavaScript：如果未定义，则实现'element.hasAttribute'[对于IE7]

3 个答案: