在Internet Explorer中出现的JavaScript DOM错误

Question

我在这行代码上收到以下错误信息：

select.up().appendChild(sw);

出现错误"SCRIPT438: 对象不支持属性或方法 'up'"

这只会在Internet Explorer中发生...Chrome，Safari和Firefox都能正常运行该代码。 我无法通过Google搜索找到任何关于“select.up()”的信息。 该代码不是我自己编写的，我对使用JavaScript中的DOM不太熟练。

以下是其余代码：

<?php 
$swatches = $this->get_option_swatches();
?>
<script type="text/javascript">
    document.observe('dom:loaded', function() {
        try {
            var swatches = <?php echo Mage::helper('core')->jsonEncode($swatches); ?>;

            function find_swatch(key, value) {
                for (var i in swatches) {
                    if (swatches[i].key == key && swatches[i].value == value)
                        return swatches[i];
                }
                return null;
            }

            function has_swatch_key(key) {
                for (var i in swatches) {
                    if (swatches[i].key == key)
                        return true;
                }
                return false;
            }

            function create_swatches(label, select) {
                // create swatches div, and append below the <select>
                var sw = new Element('div', {'class': 'swatches-container'});
                select.up().appendChild(sw);

                // store these element to use later for recreate swatches
                select.swatchLabel = label;
                select.swatchElement = sw;

                // hide select
                select.setStyle({position: 'absolute', top: '-9999px'})

                $A(select.options).each(function(opt, i) {
                    if (opt.getAttribute('value')) {
                        var elm;
                        var key = trim(opt.innerHTML);

                        // remove price
                        if (opt.getAttribute('price')) key = trim(key.replace(/\+([^+]+)$/, ''));

                        var item = find_swatch(label, key);
                        if (item)
                            elm = new Element('img', {
                                src: '<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_MEDIA); ?>swatches/'+item.img, 
                                alt: opt.innerHTML, 
                                title: opt.innerHTML, 
                                'class': 'swatch-img'});
                        else {
                            console.debug(label, key, swatches);
                            elm = new Element('a', {'class': 'swatch-span'});
                            elm.update(opt.innerHTML);
                        }
                        elm.observe('click', function(event) {
                            select.selectedIndex = i;
                            fireEvent(select, 'change');
                            var cur = sw.down('.current');
                            if (cur) cur.removeClassName('current');
                            elm.addClassName('current');
                        });
                        sw.appendChild(elm);
                    }
                });
            }

            function recreate_swatches_recursive(select) {
                // remove the old swatches
                if (select.swatchElement) {
                    select.up().removeChild(select.swatchElement);
                    select.swatchElement = null;
                }

                // create again
                if (!select.disabled)
                    create_swatches(select.swatchLabel, select);

                // recursively recreate swatches for the next select
                if (select.nextSetting)
                    recreate_swatches_recursive(select.nextSetting);
            }

            function fireEvent(element,event){
                if (document.createEventObject){
                    // dispatch for IE
                    var evt = document.createEventObject();
                    return element.fireEvent('on'+event,evt)
                }
                else{
                    // dispatch for firefox + others
                    var evt = document.createEvent("HTMLEvents");
                    evt.initEvent(event, true, true ); // event type,bubbling,cancelable
                    return !element.dispatchEvent(evt);
                }
            }

            function trim(str) {
                return str.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
            }


            $$('#product-options-wrapper dt').each(function(dt) {

                // get custom option's label
                var label = '';
                $A(dt.down('label').childNodes).each(function(node) {
                    if (node.nodeType == 3) label += node.nodeValue;
                });
                label = trim(label);

                var dd = dt.next();
                var select = dd.down('select');
                if (select && has_swatch_key(label)) {
                    create_swatches(label, select);

                    // if configurable products, recreate swatches of the next select when the current select change
                    if (select.hasClassName('super-attribute-select')) {
                        select.observe('change', function() {
                            recreate_swatches_recursive(select.nextSetting);
                        });
                    }
                }
            });
        }
        catch(e) {
            alert("Color Swatches javascript error. Please report this error to [e-mail]. Error:" + e.message);
        }
    });
</script>

感谢您能提供任何见解！

内容已翻译如上。

- TravelingAdMan

---

up() 方法 似乎来自 Prototype。 - Andrew Marshall

那段代码看起来像是写来使用一个库，也许是Prototype。如果是这样的话，有几个问题是相当可疑的，很可能会在IE中引起问题："hasClassName()"、"observe()"等等。不过很难确定。 - Pointy

@AndrewMarshall 哦，好的我记不清了。那么在该函数开头添加类似于 select = $(select); 的内容可能会起作用，对吧？我对 Prototype 有点生疏了。 - Pointy

Answer 1

我很确定up()是PrototypeJS的一个方法，所以我相信你需要它才能正常工作。 http://prototypejs.org/api/element/up

- Shai Mishali

---

这是正确的 - 但同样也正确的是，在IE中，所有DOM元素引用都需要显式地“包装”。 （至少在某个时候，这是Prototype的真实情况，因为在IE中不可能扩展DOM原型。） - Pointy

我认为你的建议 select = $(select); 可能会起作用。该死的IE。让我们看看它是否适用于Op。 - Shai Mishali

我尝试将 select = $(select); 放在函数开头，但仍然收到相同的错误... 感谢提供 Prototype 的参考！这段代码被用于 Magento 网站，因此使用了 Prototype。 - TravelingAdMan

不深入了解您的应用程序很难知道。这可能是由于脚本在原型之前加载（使.up()不可用），或者几乎任何其他问题:P。 - Shai Mishali

嗨，Shai，为什么Internet Explorer比其他浏览器加载原型慢？因为它在所有的webkit浏览器和firefox中都工作正常。原型脚本被加载到标头中，DOM脚本被加载到页面中。您可以在此处查看页面示例（http://bit.ly/zzIA6H）。 - TravelingAdMan

你永远无法确定IE的情况。不同的浏览器有时会在不同的堆栈上加载内容，而IE则众所周知存在问题。尝试在同一点调用一些基本的Prototype代码，看看是否适用于您。 - Shai Mishali

Answer 2

我也遇到了这个问题，所以我进行了评论。

var sw = new Element('div', {'class': 'swatches-container'});
$(select).up().appendChild(sw);
select.setStyle({position: 'absolute', top: '-9999px'})

从函数create_swatches中复制行，并将其粘贴到函数trim(str)中。

之后我再也没有出现错误了。

- user1443655