Question

我的javascript代码似乎适用于Chrome，Firefox和Safari，但由于某些变量未定义而无法在IE中运行，但如果查看我的代码，您会看到变量被正确赋值。我觉得它与它们被定义的范围有关但我不想在尝试修复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 方法未被调用，因为引用为null。在这种情况下，调用的引用是变量 lastRow ，它是一个表行元素。

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

lastRow.parentElement.removeChild(lastRow);

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

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

Answer 1

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

Answer 2

我通过脚本在控制台中执行了一些日志来解决问题。似乎以下行使变量 lastRow 为null：

parentNode.innerHTML = parentNode.innerHTML + template.outerHTML;

在前面提到的行之前，lastRow有一个元素对象作为值。行执行后，lastRow值变为null（仅在IE上）。要解决此问题，我必须更改 parentNode.innerHTML 以在 template.cloneNode（true）上使用 appendChild 。

parentNode.appendChild(template.cloneNode(true));

然后我移动了一些其他函数来使我的代码像以前一样工作。

在定义

2 个答案: