IE 8: Объект не поддерживает свойство или метод 'getElementsByClassName'

Я использую слайдер 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 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>

Ответ 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(/[[email protected]$%^&*()_+\-=,./';:"?><[\]{}|'#]/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/