IE 8: Object doesn't support property or method 'getElementsByClassName'

Question

I'm using the diapo slider which seems to work in all other browsers except for internet explorer 8.

After running ie8 in debug mode I get the following errors:

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

I am running this slider in the magento platform and it seems that prototype script in the one having the problem. The version of prototype that its using is 1.7 so that rules out the possible fix of a script update.

Note: Although, I'm not having a display issue in ie9, I am getting the following error:

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

These are the scripts that are required for the diapo slider to work, loaded with the script tag in the header. I'm not sure but maybe some of these scripts are conflicting with existing scripts:

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

Rob W · Answer 1 · 2013-03-15T21:05:50.660

18

IE8 does not support getElementsByClassName. However, it does support querySelectorAll. So, I suggest to write a polyfill using querySelectorAll.

document.getElementsByClassName('foo')

turns into

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

Note that Prototype.js deprecates the use of getElementsByClassName in favour of $$ and Element#select.

A quick fix for 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]-->

Notes:

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

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

edited Mar 15 '13 at 21:05

answered May 07 '12 at 15:09

Rob W

341,306
83
791
678

Thanks Rob, but how would I apply this fix?...I updated my post with more relevant details about the scripts used. Please let me know if this helps. Thanks a mil! – gdinari May 07 '12 at 15:17
You're using jQuery and Prototype.js on the same page. Any chance that they are conflicting with each other? Diapo does not use Prototype.js, but you're still getting Prototype.js-related errors. – Rob W May 07 '12 at 15:19
Yeah, the prototype script is a part of the magento platform so its uploaded by default...I could try to disable it just for the homepage, but Im interested in your polyfill solution too – gdinari May 07 '12 at 15:22
@gdinari See updated answer for the polyfill. This has to be included before Prototype.js – Rob W May 07 '12 at 15:50
Perfect! Thanks a mil Rob. The days of wrecking my brain was worth it, for this fix. Thank again – gdinari May 07 '12 at 15:56
How can i fix for ie7? – shorif2000 Feb 02 '15 at 09:28
@bonez Use XPath, e.g. as shown here: http://stackoverflow.com/questions/6584635/getelementsbyclassname-doesnt-work-in-old-internet-explorers-like-ie6-ie7-i/25054465#25054465 (note: the code over there does not sanitize the input, so either edit in the parameter sanitization from my answer, or don't use unusual characters in your class name). – Rob W Feb 02 '15 at 09:47

IE 8: Object doesn't support property or method 'getElementsByClassName'

1 Answers1

Linked

Related