jQuery调整大小的代码导致IE7中的永久调整大小事件

Question

这是我写的一些JavaScript（jQuery），可将元素缩小到尽可能高的位置，同时仍将整个页面保持在首位。 它的工作方式实质上是“计算文档和窗口之间的高度差，并使元素减小那么多”。 （见下文。）

就我所知，这可以正常工作-不幸的是，我仍然需要IE7支持，并且该浏览器中的行为有点奇怪。 具体来说， 调用我的函数似乎会引发另一个resize事件 ，从而导致一种反馈循环。

IE7显然是唯一发生这种情况的浏览器，而且我还没有弄清楚为什么会发生这种情况。 我已经尝试过减小目标高度以确保没有超出范围，但是结果是相同的。

使我的代码不触发IE7中的resize事件的最佳方法是什么？

function stretchToBottom($element) {

    (window.onresize = function () {

        // temporarily reset the element's height so $(document).height() yields the right value
        $element.css({maxHeight: ''});

        var heightDiff = $(document).height() - $(window).height();
        if (heightDiff <= 0) {
            return;
        }

        var initialHeight = $element[0].scrollHeight;
        var minHeight = 200;
        var targetHeight = initialHeight - heightDiff;
        var height = Math.max(targetHeight, minHeight);

        $element.css({maxHeight: height + 'px'});

    })();

}

Answer 1

用以下代码包装您的代码：

<!--[if !IE7]>-->
//NONE IE code comes here
<!--<![endif]-->

<!--[if IE7]>
//ONLY IE7 code comes here
<![endif]-->

更多信息在这里

Answer 2

我刚刚发现了这个问题 ，它描述了我所遇到的完全相同的问题。 前两个答案提供了一个可行的解决方案：存储当前窗口的尺寸，仅在事件监听器实际更改后才对其进行处理。

作为记录，这是我当前拥有的工作代码。 我将函数名称更改为更准确，并将“添加事件侦听器”部分移至函数外部。

function shrinkToFit($element) {

    $element.css({maxHeight: ''});

    var heightDiff = $(document).height() - $(window).height();
    if (heightDiff <= 0) {
        return;
    }

    var initialHeight = $element[0].scrollHeight;
    var minHeight = 200;
    var targetHeight = initialHeight - heightDiff;
    var height = Math.max(targetHeight, minHeight);

    $element.css({maxHeight: height + 'px'});

}

var lastWindowWidth = $(window).width();
var lastWindowHeight = $(window).height();
$(window).on('resize', function () {
    if (lastWindowWidth !== $(window).width() || lastWindowHeight !== $(window).height()) {
        shrinkToFit($tableContainer);
        lastWindowWidth = $(window).width();
        lastWindowHeight = $(window).height();
    }
});