IE 8:Object不支持属性或方法'getElementsByClassName'

Question

我正在使用diapo滑块,除了Internet Explorer 8之外,它似乎适用于所有其他浏览器.

在调试模式下运行ie8后,我收到以下错误:

SCRIPT438:Object不支持属性或方法'getElementsByClassName'prototype.js,5988行5

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

SCRIPT438:Object不支持属性或方法'fireEvent'prototype.js,第5736行第7行

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

    return Event.extend(event);

我在magento平台上运行这个滑块,看起来那个原型脚本有问题.它使用的原型版本是1.7,因此排除了脚本更新的可能修复.

注意:虽然,我在ie9中没有显示问题,但是我收到以下错误:

SCRIPT438:Object不支持属性或方法'dispatchEvent'prototype.js,第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也没有支持getElementsByClassName.然而,它的确支持querySelectorAll.所以,我建议用一个polyfill写querySelectorAll.

document.getElementsByClassName('foo')

变成

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

注意的Prototype.js 不赞成使用的getElementsByClassName赞成$$和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]-->

笔记:

• 它确实支持多个类名.
• 它不支持empty('')类名.如果你愿意的话,添加对这些的支持是微不足道的.

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