Вопрос по internet-explorer – IE 8: объект не поддерживает свойство или метод 'getElementsByClassName'

10

Я использую слайдер diapo, который, похоже, работает во всех других браузерах, кроме Internet Explorer 8.

После запуска ie8 в режиме отладки я получаю следующие ошибки:

SCRIPT438: Object doesn't support property or method 'getElementsByClassName' prototype.js, line 5988 character 5

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

SCRIPT438: Object doesn't support property or method 'fireEvent' prototype.js, line 5736 character 7

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

    return Event.extend(event);
</code>

Я запускаю этот слайдер на платформе magento, и кажется, что у прототипа скрипта есть проблема. Используемая версия прототипа - 1.7, что исключает возможность исправления обновления скрипта.

Примечание: хотя у меня нет проблемы с отображением в ie9, я получаю следующую ошибку:

SCRIPT438: Object doesn't support property or method 'dispatchEvent' prototype.js, line 5734 character 7

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

    return Event.extend(event);
</code>

Это сценарии, необходимые для работы слайдера diapo, загруженные с тегом script в заголовке. Я не уверен, но, возможно, некоторые из этих сценариев конфликтуют с существующими сценариями:

<code><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>
</code>

Ваш Ответ

1   ответ
18

IE8 делаетне служба поддержкиgetElementsByClassName, Тем не менее, этоделает служба поддержкиquerySelectorAll, Итак, я предлагаю написать polyfill, используяquerySelectorAll.

document.getElementsByClassName('foo')

превращается в

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

Обратите внимание, что Prototype.jsосуждает использование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(/[[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]-->

Заметки:

It does support multiple class names. It does not support empty ('') class names. It's trivial to add support for these, if you want.

Демо-версия:http://jsfiddle.net/HL4FL/21/

Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded gdinari
Error: User Rate Limit Exceeded gdinari
Error: User Rate Limit Exceeded gdinari
Error: User Rate Limit Exceeded

Похожие вопросы