IE 8: El objeto no acepta la propiedad o método 'getElementsByClassName'

Question

estoy usando el control deslizante diapo que parece funcionar en todos los demás navegadores excepto para Internet Explorer 8.

Después de ejecutar IE8 en modo de depuración consigo los siguientes errores:

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); 

me postulo este control deslizante en la plataforma Magento y parece que el prototipo scr ipt en el que tiene el problema. La versión del prototipo que está usando es 1.7, por lo que descarta la posible solución de una actualización de script.

Nota: Aunque, no estoy teniendo un problema de visualización en IE9, estoy consiguiendo el error siguiente:

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); 

Estos son los scripts que se requieren para el control deslizante diapo funcione, cargado con la etiqueta de script en el encabezado. No estoy seguro, pero tal vez algunas de estas secuencias de comandos están en conflicto con las secuencias de comandos existentes:

<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 hace not apoyo getElementsByClassName. Sin embargo, es does compatible con querySelectorAll. Por lo tanto, sugiero que se escriba un relleno sintético usando querySelectorAll.

document.getElementsByClassName('foo') 

convierte en

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

Tenga en cuenta que Prototype.js deprecates the use of getElementsByClassName in favour of $$ y Element#select.

Una solución rápida para 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]--> 

Notas:

• Se soporta múltiples nombres de clase.
• No admite nombres de clase vacíos (''). Es trivial agregar soporte para estos, si lo desea.

Demostración: http://jsfiddle.net/HL4FL/21/