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/
