internet-explorer - IE 8 : Object doesn't support property or method 'getElementsByClassName'

Question

我正在使用 diapo slider ，它似乎可以在除 Internet Explorer 8 之外的所有其他浏览器中使用。

在 Debug模式下运行 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平台上运行这个 slider ，似乎原型(prototype)脚本在那个有问题的地方。它使用的原型(prototype)版本是 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 slider 工作所需的脚本，在标题中加载了 script 标签。我不确定，但其中一些脚本可能与现有脚本冲突:

<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 做 not支持 getElementsByClassName .但是，它 does支持 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/