0

我在我的主 js 文件中运行了几个函数，在其中一个中添加了两行后，出现了这个错误。奇怪的是，错误引用了其他函数之一中的变量，该变量与被调用的函数完全无关。

这是我更改的功能：

window.onresize = function(){
    var timeOut = null;
    if(timeOut != null) clearTimeout(timeOut);
        setTimeout(expandWrapper, 500);
}

var expandWrapper = function(){ 
    //var eContent = document.getElementById("content");
    var eContent = document.getElementById("main-content");
    var eMainContent = document.getElementById("column-1");
    var elayoutArea = document.getElementById("layout-column_column-1");
    var eFooter = document.getElementById("footer");
    //var dScrollb = $(".dataTables_scrollBody");
    var leftWrapper = document.getElementById("left-links-wrapper");
    var contentEnd = eMainContent.clientHeight + eMainContent.offsetTop;

    if(document.documentElement.clientHeight >= (eContent.offsetTop  + elayoutArea.clientHeight + eFooter.clientHeight)){       
        eMainContent.style.height = document.documentElement.clientHeight - eContent.offsetTop - eFooter.clientHeight -1 + "px";
        added line--> leftWrapper.style.height = document.documentElement.clientHeight - eContent.offsetTop - eFooter.clientHeight -1 + "px";
        //console.log("primary condition");
    } else {
        eMainContent.style.height = ($(window).height()); //elayoutArea.clientHeight + "px";
        added line-->leftWrapper.style.height = eMainContent.offsetHeight + "px";
        //console.log("fallback");
    }   
}

我已经指出了两个添加的行，位于 if 语句中并以“ leftWrapper.style.height”开头。顺便说一句，虽然 eMainContent 元素出现在所有页面上，但 leftWrapper 元素只出现在某些页面上，并且错误只出现在那些不存在 leftWrapper 的页面上。

我认为这就是问题所在：javascript 翻转，因为它无法执行我在特定页面上不存在的元素上请求的操作。

假设这是问题所在，我该如何重写它以缓解此错误，但在它存在的页面上修改 leftWrapper？

4

2 回答 2

3

正如您所指出的，问题在于，getElementById如果您传入 DOM 中不存在的标识符，则调用将返回 null。

对于此类情况，您正在使用可能为 null 或未定义的对象，您可以简单地执行以下操作：

if (possiblyNullOrUndefinedVariable) {
  possiblyNullOrUndefinedVariable.doSomething();
}

这也可以缩短为：

possiblyNullOrUndefinedVariable && possiblyNullOrUndefinedVariable.doSomething();

利用&&操作员的短路。

值得注意的一个警告是，这不会像您对所有变量的期望一样。0并且''也是错误的值。如果您知道您将处理字符串或数字，则可以改为执行以下操作：

if (possiblyNullOrUndefinedVariable != null && possiblyNullOrUndefinedVariable != undefined) {
  possiblyNullOrUndefinedVariable.doSomething();
}
于 2012-11-09T08:01:15.363 回答
3

为什么要混合 jQuery 和 dom？这很令人困惑。

你能试一下吗

var timeOut = null;
window.onresize = function(){
  clearTimeout(timeOut); // can always be done
  timeOut=setTimeout(expandWrapper, 500);
}

var expandWrapper = function(){ 
    var eContent = $("#main-content");
    var eMainContent = $("#column-1");
    var elayoutArea = $("#layout-column_column-1");
    var eFooter = $("#footer");
    var leftWrapper = $("#left-links-wrapper");
    var docHeight = $(document).height();
    var contentEnd = eMainContent.height() + eMainContent.offset().top;
    if(docHeight >= (eContent.offset().top  + elayoutArea.height() + eFooter.height())){       
            eMainContent.height(docHeight - eContent.offset().top - eFooter.height() -1);
        leftWrapper.height() = docHeight - eContent.offsetTop - eFooter.clientHeight -1 + "px";
            //console.log("primary condition");
        } else {
            eMainContent.height(($(window).height()); 
            leftWrapper.height(eMainContent.height);
            //console.log("fallback");
        }   
    }
于 2012-11-09T07:56:29.997 回答