10

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

在调试模式下运行 ie8 后，出现以下错误：

SCRIPT438：对象不支持属性或方法“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：对象不支持属性或方法“dispatchEvent”prototype.js，第 5734 行字符 7

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

    return Event.extend(event);

这些是 diapo 滑块工作所需的脚本，在标题中加载了 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>
4

1 回答 1

18

IE8不支持getElementsByClassName。但是，它确实支持querySelectorAll. 所以，我建议使用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]-->

笔记：

  • 它确实支持多个类名。
  • 它不支持空 ( '') 类名。如果需要，添加对这些的支持很简单。

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

于 2012-05-07T15:09:26.170 回答