Question

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

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

SCRIPT438：Object不支持属性或方法 'getElementsByClassName'prototype.js，5988行5字符

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

SCRIPT438：对象不支持属性或方法'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行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支持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/

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

1 个答案: