IE 8: Obiekt nie obsługuje właściwości lub metody „getElementsByClassName”

Question

używam suwak diapo który wydaje się działać we wszystkich innych przeglądarek z wyjątkiem Internet Explorer 8.

Po uruchomieniu IE8 w trybie debugowania otrzymuję następujące błędy:

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

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

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

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

    return Event.extend(event); 

Używam tego suwaka w platformie magento i wydaje się, że prototyp SCR ipt w tym, który ma problem. Wersja prototypu, której użycie wynosi 1.7, co wyklucza możliwą poprawkę aktualizacji skryptu.

Uwaga: Mimo, że nie jestem posiadające problemu wyświetlania w IE9, otrzymuję następujący błąd:

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

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

    return Event.extend(event); 

Są to skrypty, które są wymagane na suwak diapo do pracy, załadowany tagiem skryptu w nagłówku. Nie jestem pewien, ale być może niektóre z tych skryptów są sprzeczne z istniejącymi skryptami:

<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 robi not wsparcia getElementsByClassName. Jednak to does obsługuje querySelectorAll. Proponuję więc napisać polyfill przy użyciu querySelectorAll.

document.getElementsByClassName('foo') 

zamienia

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

Zauważ, że Prototype.js deprecates the use of getElementsByClassName in favour of $$ i Element#select.

Quick Fix dla 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]--> 

Uwagi:

• To nie obsługuje wiele nazw klas.
• Nie obsługuje pustych ('') nazw klas. Łatwo jest dodać do nich wsparcie, jeśli chcesz.

Demo: http://jsfiddle.net/HL4FL/21/