IE 抛出 JavaScript TypeError 但在 chrome 上不抛出

描述在我们的 Magento 购物车上，当用户单击添加到购物篮在任何 Internet Explorer 浏览器的“产品详细信息”页面上单击按钮，浏览器中都会弹出一个包含以下错误消息的窗口：

异常：类型错误：无法获取未定义或空引用的属性“tagName”

起初我以为这个错误是由于 AJAX 调用引起的，但在浏览器调试器中进一步调查后，我可以看到它是在 JavaScript 尝试修改 DOM 节点/ HTML 标签及其属性时引起的。

我在所有子树和属性修改上设置了断点#mdl_ajax_confirm div，调用堆栈为：

ajax_cart.js:87
ajax_cart.js:89
ajax_cart.js:91
ajax_cart.js:97
ajax_cart.js:99
ajax_cart.js:104
ajax_cart.js:110
ajax_cart.js:112
ajax_cart.js:113

在 IE 中它会中断ajax_cart.js:104并前往prototype:1617来处理异常。

所以有问题的代码似乎是ajax_cart.js：104这是：

$$('.block-cart').each(function (el){
  el.replace(mini_cart_txt);
  //new Effect.Opacity(el, { from: 0, to: 1, duration: 1.5 });
});

在 Chrome 中，它返回 HTML，但在 IE 中，它在控制台中返回与弹出窗口相同的错误：无法获取未定义或空引用的属性“tagName”

QUESTION

我检查了 IE 控制台mini_cart_txt var在执行 ajax_cart.js:104 之前是否存在，问题是我相信来自el？我不确定如何修复它或者该代码块到底发生了什么？

以下是其余代码，提前致谢:)

CODE

ajax_cart.js

var inCart = false;

if (window.location.toString().search('/product_compare/') != -1){
  var win = window.opener;
}
else{
  var win = window;
}

if (window.location.toString().search('/checkout/cart/') != -1){
    inCart = true;
}


function setLocation(url){
    if(!inCart && (/*(url.search('/add') != -1 ) || (url.search('/remove') != -1 ) ||*/ url.search('checkout/cart/add') != -1) ){
        sendcart(url, 'url');
    }else if((url.search('catalog/product_compare') != -1) ){
        sendcompare(url, 'url');
    }
  else{
        window.location.href = url;
    }
}
function sendcompare(url, type){
  //alert('test');
   showLoading();
      url = url.replace("catalog/product_compare/add","bestseller/index/compare");
    url += 'isAjax/1/';
    //jQuery('#ajax_loading'+id).show();
    jQuery.ajax( {
        url : url,
        dataType : 'json',
        success : function(data) {
           // jQuery('#ajax_loading'+id).hide();
            if(data.status == 'ERROR'){
                alert(data.message);
            }
      else if(data.already!='')
      {
         $('mdl-temp-div').innerHTML = data.already;
                var return_message = data.already;
                $('mdl_ajax_confirm').innerHTML = '<div id="mdl_ajax_confirm_wrapper"><div class="f-block"><ul class="messages"><li class="notice-msg">'+return_message + '</li></ul></div></div>';
        showConfirm();
      }
      else{
          $('mdl-temp-div').innerHTML = data.message;
                var return_message = data.message;
                $('mdl_ajax_confirm').innerHTML = '<div id="mdl_ajax_confirm_wrapper"><div class="f-block"><ul class="messages"><li class="success-msg">'+return_message + '</li></ul></div></div>';
        showConfirm();
                if(jQuery('.header-compare').length){
                    jQuery('.header-compare').replaceWith(data.sidebar);
          // Clear All

                }else{
                    if(jQuery('.col-right').length){
                        jQuery('.col-right').prepend(data.sidebar);
                    }
                }
            }
        }
    });
}

function sendcart(url, type){
    showLoading();
    if (type == 'form'){
        url = ($('product_addtocart_form').action).replace('checkout', 'mdlajaxcheckout/index/cart');
        //url = ($('product_addtocart_form').action);
        var myAjax = new Ajax.Request(
        url,
        {
            method: 'post',
            postBody: $('product_addtocart_form').serialize(),
            parameters : Form.serialize("product_addtocart_form"),
            onException: function (xhr, e)
            {
                alert('Exception : ' + e);
            },
            onComplete: function (xhr)
            {
                $('mdl-temp-div').innerHTML = xhr.responseText;
                var return_message = $('mdl-temp-div').down('.mdl_ajax_message').innerHTML;

                var middle_text = '<div class="mdl-cart-bts">'+$('mdl-temp-div').down('.back-ajax-add').innerHTML+'</div>';

                $('mdl_ajax_confirm').innerHTML = '<div id="mdl_ajax_confirm_wrapper">'+return_message + middle_text + '</div>';

                var link_cart_txt = $('mdl-temp-div').down('.cart_content').innerHTML;

                $$('.top-link-cart').each(function (el){
                    el.innerHTML = link_cart_txt;
                });



                var mini_cart_txt = $('mdl-temp-div').down('.cart_side_ajax').innerHTML;

                $$('.mini-cart').each(function (el){
                    el.replace(mini_cart_txt);
                    //new Effect.Opacity(el, { from: 0, to: 1, duration: 1.5 });
                });

                $$('.block-cart').each(function (el){
                    el.replace(mini_cart_txt);
                    //new Effect.Opacity(el, { from: 0, to: 1, duration: 1.5 });
                });


                replaceDelUrls();

                if (ajax_cart_show_popup){
                    showConfirm();
                } else {
                    hideMdlOverlay();
                }

            }

        });



    } else if (type == 'url'){

        url = url.replace('checkout', 'mdlajaxcheckout/index/cart');
        //alert(url);
        var myAjax = new Ajax.Request(
        url,
        {
            method: 'post',
            postBody: '',
            onException: function (xhr, e)
            {
                alert('Exception : ' + e);
            },
            onComplete: function (xhr)
            {
                $('mdl-temp-div').innerHTML = xhr.responseText;
                var return_message = $('mdl-temp-div').down('.mdl_ajax_message').innerHTML;
                var middle_text = '<div class="mdl-cart-bts">'+$('mdl-temp-div').down('.back-ajax-add').innerHTML+'</div>';


                var content_ajax = return_message + middle_text;

                $('mdl_ajax_confirm').innerHTML = '<div id="mdl_ajax_confirm_wrapper">'+content_ajax + '</div>';

                var link_cart_txt = $('mdl-temp-div').down('.cart_content').innerHTML;

                $$('.top-link-cart').each(function (el){
                    el.innerHTML = link_cart_txt;
                });




                var mini_cart_txt = $('mdl-temp-div').down('.cart_side_ajax').innerHTML;

                //alert(mini_cart_txt);

                $$('.mini-cart').each(function (el){
                    el.replace(mini_cart_txt);
                    //new Effect.Opacity(el, { from: 0, to: 1, duration: 1.5 });
                });

                $$('.block-cart').each(function (el){
                    el.replace(mini_cart_txt);
                    //new Effect.Opacity(el, { from: 0, to: 1, duration: 1.5 });
                });


                replaceDelUrls();
                if (ajax_cart_show_popup){
                    showConfirm();
                } else {
                    hideMdlOverlay();
                }
            }

        });

    }

}

function replaceDelUrls(){
    //if (!inCart){
        $$('a').each(function(el){
            if(el.href.search('checkout/cart/delete') != -1 && el.href.search('javascript:cartdelete') == -1){
                el.href = 'javascript:cartdelete(\'' + el.href +'\')';
            }
        });
    //}
}

function replaceAddUrls(){
    $$('a').each(function(link){
        if(link.href.search('checkout/cart/add') != -1){
            link.href = 'javascript:setLocation(\''+link.href+'\'); void(0);';
        }
    });
}

function cartdelete(url){

    showLoading();
    url = url.replace('checkout', 'mdlajaxcheckout/index/cartdelete');
    var myAjax = new Ajax.Request(
    url,
    {
        method: 'post',
        postBody: '',
        onException: function (xhr, e)
        {
            alert('Exception : ' + e);
        },
        onComplete: function (xhr)
        {
            $('mdl-temp-div').innerHTML = xhr.responseText;
            //$('mdl-temp-div').insert(xhr.responseText);

            var cart_content = $('mdl-temp-div').down('.cart_content').innerHTML;

            //alert(cart_content);

            $$('.top-link-cart').each(function (el){
                el.innerHTML = cart_content;
            });



            var process_reload_cart = false;
            var full_cart_content = $('mdl-temp-div').down('.mdl_full_cart_content').innerHTML;
            $$('.cart').each(function (el){
                el.replace(full_cart_content);
                process_reload_cart = true;
            });

            if (!process_reload_cart){
                $$('.checkout-cart-index .col-main').each(function (el){
                    el.replace(full_cart_content);
                    //new Effect.Opacity(el, { from: 0, to: 1, duration: 1.5 });
                });
            }




            var cart_side = '';
            if ($('mdl-temp-div').down('.cart_side_ajax')){
                cart_side = $('mdl-temp-div').down('.cart_side_ajax').innerHTML;
            }


            $$('.mini-cart').each(function (el){
                el.replace(cart_side);
                //new Effect.Opacity(el, { from: 0, to: 1, duration: 1.5 });
            });
            $$('.block-cart').each(function (el){
                el.replace(cart_side);
                //new Effect.Opacity(el, { from: 0, to: 1, duration: 1.5 });
            });



            replaceDelUrls();

            //$('mdl_ajax_progress').hide();
            hideMdlOverlay();
        }

    });


}

function showMdlOverlay(){
    new Effect.Appear($('mdl-overlay'), { duration: 0.5,  to: 0.8 });
}

function hideMdlOverlay(){
    $('mdl-overlay').hide();
    $('mdl_ajax_progress').hide();
    $('mdl_ajax_confirm').hide();
}


function mdlCenterWindow(element) {
     if($(element) != null) {

          // retrieve required dimensions
            var el = $(element);
            var elDims = el.getDimensions();
            var browserName=navigator.appName;
            if(browserName==="Microsoft Internet Explorer") {

                if(document.documentElement.clientWidth==0) {
                    //IE8 Quirks
                    //alert('In Quirks Mode!');
                    var y=(document.viewport.getScrollOffsets().top + (document.body.clientHeight - elDims.height) / 2);
                    var x=(document.viewport.getScrollOffsets().left + (document.body.clientWidth - elDims.width) / 2);
                }
                else {
                    var y=(document.viewport.getScrollOffsets().top + (document.documentElement.clientHeight - elDims.height) / 2);
                    var x=(document.viewport.getScrollOffsets().left + (document.documentElement.clientWidth - elDims.width) / 2);
                }
            }
            else {
                // calculate the center of the page using the browser andelement dimensions
                var y = Math.round(document.viewport.getScrollOffsets().top + ((window.innerHeight - $(element).getHeight()))/2);
                var x = Math.round(document.viewport.getScrollOffsets().left + ((window.innerWidth - $(element).getWidth()))/2);
            }
            // set the style of the element so it is centered
            var styles = {
                position: 'absolute',
                top: y + 'px',
                left : x + 'px'
            };
            el.setStyle(styles);




     }
}



function showLoading(){
    showMdlOverlay();
    var progress_box = $('mdl_ajax_progress');
    progress_box.show();
    progress_box.style.width = loadingW + 'px';
    progress_box.style.height = loadingH + 'px';


    $('mdl_ajax_progress').innerHTML = $('mdl-loading-data').innerHTML;
    progress_box.style.position = 'absolute';

    mdlCenterWindow(progress_box);
}


function showConfirm(){
    showMdlOverlay();
    $('mdl_ajax_progress').hide();
    var confirm_box = $('mdl_ajax_confirm');
    confirm_box.show();
    confirm_box.style.width = confirmW + 'px';
    confirm_box.style.height = confirmH + 'px';
    //mdl_ajax_confirm_wrapper
    if ($('mdl_ajax_confirm_wrapper') && $('mdl-upsell-product-table')){
        //alert($('mdl_ajax_confirm_wrapper').getHeight());
        confirm_box.style.height = $('mdl_ajax_confirm_wrapper').getHeight() + 'px';
        decorateTable('mdl-upsell-product-table');
    }

    $('mdl_ajax_confirm_wrapper').replace('<div id="mdl_ajax_confirm_wrapper">'+$('mdl_ajax_confirm_wrapper').innerHTML);

    confirm_box.style.position = 'absolute';
    mdlCenterWindow(confirm_box);
}

document.observe("dom:loaded", function() {
    replaceDelUrls();
    replaceAddUrls();
    Event.observe($('mdl-overlay'), 'click', hideMdlOverlay);

    var cartInt = setInterval(function(){
        if (typeof productAddToCartForm  != 'undefined'){
            if ($('mdl-overlay')){
                Event.observe($('mdl-overlay'), 'click', hideMdlOverlay);
            }
            productAddToCartForm.submit = function(url){
                if(this.validator && this.validator.validate()){
                    sendcart('', 'form');
                    clearInterval(cartInt);
                }

                return false;
            }
        } else {
            clearInterval(cartInt);
        }
    },500);
});

当我在 ajax_cart.js:104 之前查看调用堆栈中的每一行代码时，两个浏览器的反应相同。

87: $('mdl_ajax_confirm').innerHTML = '<div id="mdl_ajax_confirm_wrapper">'+return_message + middle_text + '</div>';

在所有浏览器上返回 HTML

89: var link_cart_txt = $('mdl-temp-div').down('.cart_content').innerHTML;

全部未定义

91:$$('.top-link-cart').each(function (el){el.innerHTML = link_cart_txt; });

返回 [对象数组][] 全部

97: var mini_cart_txt = $('mdl-temp-div').down('.cart_side_ajax').innerHTML;

全部未定义

99: $$('.mini-cart').each(function (el){ el.replace(mini_cart_txt); //new Effect.Opacity(el, { from: 0, to: 1, duration: 1.5 });});

返回 [对象数组][] 全部

104: $$('.block-cart').each(function (el){ el.replace(mini_cart_txt); //new Effect.Opacity(el, { from: 0, to: 1, duration: 1.5 }); });

无法在 IE 上获取未定义或 null 引用的属性“tagName” 在所有 Chrome 上返回 HTML

好的，经过相当多的尝试和错误后，我发现了问题所在并能够解决它。

该代码打破了第 104 行ajax_cart.js其中有这样的代码块：

$$('.block-cart').each(function (el){
  el.replace(mini_cart_txt);
  //new Effect.Opacity(el, { from: 0, to: 1, duration: 1.5 });
});

这段 prototype.js 正在 DOM 中搜索.block-cartdiv 将其替换为其中设置的 HTMLmini_cart_txt多变的。它使用原型 $$() 方法 http://www.tutorialspoint.com/prototype/prototype_dollars_method.htm方法搜索 DOM 并返回所有元素.block-cart课，然后迭代每个 http://www.tutorialspoint.com/prototype/prototype_array_each.htm并将其内容替换为mini_cart_txt多变的。

问题是我们主题的 HTML 已被修改，现在包含两个 div.block-cart div.

<div class="f-right block-cart span5">
    <div class="f-left block-cart header_cart margin-left20">[OMITTED CODE FOR BREVITY]</div>
    <div class="f-right checkout-button">[OMITTED CODE FOR BREVITY]</div>    
</div>

还有 HTML 中mini_cart_txt变量自然也有两个.block_cart类，而在原始主题中只有一个 div 具有一类.block-cart.

<div class="f-right block-cart span5">
    <div class="f-left block-cart header_cart margin-left20">[CODE WITH SUB_TREE CHANGES OMMITED]</div>
    <div class="f-right checkout-button"></div>
</div>

<script type="text/javascript">[OMITTED CODE FOR BREVITY]</script>

这是在 IE 中导致异常的原因，但在 Chrome 中则不然。我不确定为什么 Chrome 跳过了这个异常。也许 Chrome 取代了第一个.block-cartdiv然后没有继续替换第二个.block-cartdiv 是第一个的子级，而 IE 遇到了一种导致异常的循环。

无论如何，我能够通过删除来解决这个问题block-cart第一个块车 div 的子 div 的类名称。

<div class="f-right block-cart span5">
    <div class="f-left header_cart margin-left20">[OMITTED CODE FOR BREVITY]</div>
    <div class="f-right checkout-button">[OMITTED CODE FOR BREVITY]</div>    
</div>