Javascript: Implement 'element.hasattribute' If Undefined [for Ie7]

I need to make an exisitng web application compatible with IE7. The code uses element.hasAttribute extensively and IE7 has issues with this method. Object doesn't support property

Solution 1:

Since Element.prototype is not supported IE < 8, there is no efficient way to polyfill hasAttribute. The inefficient way (if you wanted to avoid shimming) would be something like this (placed after all inputs had loaded):

<inputdata-abc="" /><script>if (!window.Element || !window.Element.prototype || !window.Element.prototype.hasAttribute) {

(function () {
    functionhasAttribute (attrName) {
        returntypeofthis[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>

Solution 2:

I known this is an old post and maybe nobody else use IE7 but if like me you need it (and need to use ajax or something like that) this is my propose.

Maybe we can improve the performance creating a proxy of getElementsByTagName or getElementById to do the trick, and this add support to dynamic elements that are created in runtime.

Maybe something like this:

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

      // The HasAttribute function.functionhasAttribute (attrName) {
         returntypeofthis[attrName] !== 'undefined';
      }

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

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

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

And this functionality can be in a separated javascript file included with conditional tags in IE:

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

And then just use the document.getElementsByTagName or document.getElementById.

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

Solution 3:

Try it:

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