IE 8：對象不支持屬性或方法「getElementsByClassName方法」

Question

我使用diapo滑塊，似乎是在所有其他瀏覽器的工作除了Internet Explorer 8中

在調試模式下，我得到運行IE8後以下錯誤：

SCRIPT438: Object doesn't support property or method 'getElementsByClassName' prototype.js, line 5988 character 5

return function(className, parentElement) { 
    return $(parentElement || document.body).getElementsByClassName(className); 
    }; 

SCRIPT438: Object doesn't support property or method 'fireEvent' prototype.js, line 5736 character 7

if (document.createEvent) 
     element.dispatchEvent(event); 
    else 
     element.fireEvent(event.eventType, event); 

    return Event.extend(event); 

我運行這個滑塊Magento的平臺，似乎原型SCR ipt在有問題的那個。它使用的原型版本是1.7，因此排除了腳本更新的可能修復。

注意：雖然，我不是在IE9中具有顯示器的問題，我收到以下錯誤：

SCRIPT438: Object doesn't support property or method 'dispatchEvent' prototype.js, line 5734 character 7

if (document.createEvent) 
     element.dispatchEvent(event); 
    else 
     element.fireEvent(event.eventType, event); 

    return Event.extend(event); 

這些都是必需的diapo滑塊工作的腳本，在標題中加載腳本標記。我不知道，但也許其中某些腳本與現有腳本發生衝突：

<script type='text/javascript' src='http://www.pixedelic.com/plugins/diapo/scripts/jquery.min.js'></script> 
<script type='text/javascript' src='http://www.pixedelic.com/plugins/diapo/jquery.mobile-1.0rc2.customized.min.js'></script> 
<script type='text/javascript' src='http://www.pixedelic.com/plugins/diapo/jquery.easing.1.3.js'></script> 
<script type='text/javascript' src='http://www.pixedelic.com/plugins/diapo/jquery.hoverIntent.minified.js'></script> 
<script type='text/javascript' src='http://www.pixedelic.com/plugins/diapo/scripts/diapo.js'></script> 

Answer 1

IE8不支持notgetElementsByClassName。但是，它支持 querySelectorAll。所以，我建議使用querySelectorAll來編寫一個polyfill。

document.getElementsByClassName('foo') 

變成

document.querySelectorAll('.foo'); // Prefixed dot. 

注意的Prototype.js deprecates the use of getElementsByClassName in favour of $$和Element#select。

速戰速決爲IE8：

<!--[if IE 8]><script> 
document.getElementsByClassName = 
Element.prototype.getElementsByClassName = function(class_names) { 
    // Turn input in a string, prefix space for later space-dot substitution 
    class_names = (' ' + class_names) 
     // Escape special characters 
     .replace(/[~!@$%^&*()_+\-=,./';:"?><[\]{}|`#]/g, '\\$&') 
     // Normalize whitespace, right-trim 
     .replace(/\s*(\s|$)/g, '$1') 
     // Replace spaces with dots for querySelectorAll 
     .replace(/\s/g, '.'); 
    return this.querySelectorAll(class_names); 
}; 
</script><![endif]--> 

注：

• 它不支持多類名。
• 它不支持空（''）類名稱。如果你願意，增加對這些支持的支持是微不足道的。

演示：http://jsfiddle.net/HL4FL/21/