javascript - js变量定义后在IE中未定义

Question

我的 javascript 代码似乎可以在 Chrome、Firefox 和 Safari 上运行，但由于某些变量“未定义”而无法在 IE 中运行，但是如果您查看我的代码，您会看到变量被正确分配了值(value)。我觉得这与定义它们的范围有关，但我不想在尝试修复 IE 时破坏其他浏览器的代码。该问题在IE11和IE8中出现，但我没有测试其他版本的IE来验证。

function resizeCommentBox(obj,i){
    var lastItemCounter = obj[i].getElementsByTagName('tr').length - 1;
    var lastRow = obj[i].getElementsByTagName('tr')[lastItemCounter];
    var nextCommentBox = obj[i+1].getElementsByTagName('table')[0];

    console.log("lastRow.parentElement right outside the first conditional if(obj[i].offsetHeight < obj[i].scrollHeight): ");
    console.log(lastRow.parentElement);

    if(obj[i].offsetHeight < obj[i].scrollHeight){
        if( !(i+2 < obj.length) ){
            var template = document.getElementById('lastPageTemplate');
            var parentNode = template.parentNode;

            template.style.display="block";
            template.removeAttribute("id");

            parentNode.innerHTML = parentNode.innerHTML + template.outerHTML;
            parentNode.children[parentNode.children.length-1].setAttribute('id','lastPageTemplate');
            parentNode.children[parentNode.children.length-1].style.display="none";
            parentNode.children[parentNode.children.length-1].innerHTML = parentNode.children[parentNode.children.length-1].innerHTML;

        }

        console.log("lastRow.parentElement right outside the conditional if(lastRow.childElementCount > 0): ");
        console.log(lastRow.parentElement);
        if(lastRow.childElementCount > 0){
            nextCommentBox.innerHTML = lastRow.outerHTML + nextCommentBox.innerHTML;
            lastRow.parentElement.removeChild(lastRow);
        }
        else{
            lastRow.parentElement.removeChild(lastRow);
        }

            if(nextCommentBox.getElementsByTagName('tr')[nextCommentBox.getElementsByTagName('tr').length-1].innerHTML === ""){
                nextCommentBox.getElementsByTagName('tr')[nextCommentBox.getElementsByTagName('tr').length-1].parentElement.removeChild(nextCommentBox.getElementsByTagName('tr')[nextCommentBox.getElementsByTagName('tr').length-1]);
            }


        resizeCommentBox(obj,i);
    }
    else{
        try{
            var lastPageOnlyFooter = document.getElementsByClassName('keepOnLastPageOnly');
            for(var j = 0; j < lastPageOnlyFooter.length - 2; j++){
                lastPageOnlyFooter[j].parentElement.removeChild(lastPageOnlyFooter[j]);
            }
        }
        catch(err){
            console.log(err);
        }
        return false;
    }
}

function checkCommenBox(elementCounter){

    var commentBoxCollection = document.getElementsByClassName('comments');
    resizeCommentBox(commentBoxCollection,elementCounter);
    commentBoxCollection[elementCounter].style.height = "auto";

    if(elementCounter < commentBoxCollection.length){
        checkCommenBox(elementCounter + 1);
    }

}

checkCommenBox(0);

不断失败的变量是lastRow和nextCommentBox，但它们是在函数开头定义的。我现在还无法理解为什么它可以在许多浏览器上运行，但 IE 找不到变量？感谢您的帮助和建议。

已于 2015 年 8 月 31 日编辑
我截取了几张 IE 控制台的屏幕截图来显示确切的错误。正如您所看到的，remove 方法没有被调用，因为引用为空。在本例中，调用的引用是变量 lastRow，它是一个表行元素。

检查我的代码，我们发现第一个 removeChild 函数在确实存在的 lastRow.parentElement 上被调用:

lastRow.parentElement.removeChild(lastRow);

在条件之外并在调用removeChild函数之前执行console.logs，我们看到元素指针消失了。

我在 appendChild 和 removeChild 函数的表引用上切换了innerHTML，但这在 IE 上仍然失败。

Answer 1

我不确定您在这里要做什么，但不建议在 IE 浏览器上使用innerHTML和outerHTML属性，因为它仅“几乎”受支持，特别是在表格内。请参阅http://www.quirksmode.org/dom/html/并尝试以这种方式挖掘。