JavaScript：如果未定義，實現'element.hasAttribute'[用於IE7]

Question

我需要製作一個與IE7兼容的現有Web應用程序。

該代碼廣泛使用element.hasAttribute，IE7對此方法有問題。

對象不支持屬性或方法「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方法添加到元素中。 （這種方式我不需要更改當前寫入的所有代碼）

重要提示：在表單中有> 1000個隱藏輸入字段，因此'hasattribute'方法需要添加到元素中一個非常有效的方法。

請讓我知道我如何實現這一目標。謝謝！

Answer 1

由於Element.prototype不支持IE < 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)); 
} 

而且此功能可以在單獨的JavaScript包含在IE條件標籤文件：

<!--[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 
};