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/