IE 8：对象不支持属性或方法'getElementsByClassName' [英] IE 8: Object doesn't support property or method 'getElementsByClassName'

问题描述

在调试模式下运行ie8之后，我收到以下错误消息，我使用的diapo滑块似乎适用于所有其他浏览器。 ：

SCRIPT438：对象不支持属性或方法
'getElementsByClassName'prototype.js，行5988字符5

  return function（className，parentElement）{
 return $（parentElement || document。体）.getElementsByClassName（类名）; 
}; 
  

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 ，line 5734 character 7

  if（document.createEvent）
 element.dispatchEvent （事件）; 
 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> 
  

解决方案

IE8是不支持 getElementsByClassName方法 。但是， does 支持 querySelectorAll 。因此，我建议使用 querySelectorAll 编写一个polyfill。

 文档。 getElementsByClassName（'foo'）
  

变成

  document.querySelectorAll（ '富。'）; //预定点
  

请注意，Prototype.js 不赞成使用 getElementsByClassName 赞成 $$ 和 元素＃select 。

IE8的快速修复：

 <！ - [if IE 8]>< script> 
 document.getElementsByClassName = 
 Element.prototype.getElementsByClassName = function（class_names）{
 //转动字符串中的输入，用于稍后的空格替换的前缀空格
 class_names =（ '+ class_names）
 //转义特殊字符
 .replace（/ [〜！@ $％^& *（）_ + \  -  =，。/';:？> < [\] {} |`＃] / g，'\\ $&'）
 //规范化空格，右边修剪
 .replace（/ \s * \s | $）/ g，'$ 1'）
 //替换querySelectorAll的点的空格
 .replace（/ \s / g，'。'）; 
返回此.querySelectorAll（class_names）; 
}; 
< / script><！[endif]  - > 
  

注意：

• 它支持多个类名。


• 它不支持空（''）类名，如果你愿意，添加支持这个很简单。

演示： http://jsfiddle.net/HL4FL/21/

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>

解决方案

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/

这篇关于IE 8：对象不支持属性或方法'getElementsByClassName'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！