Question

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

据我所知，这很好用 - 除了不幸的是我仍然需要IE7支持，并且浏览器中的行为有点不稳定。具体来说，调用我的函数似乎会触发另一个调整大小事件，从而导致一种反馈循环。

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]-->

more info here

Answer 2

我刚刚发现了this question，它描述了我遇到的完全相同的问题。前两个答案提供了一个可行的解决方案：存储当前窗口维度，并仅在实际更改时处理事件监听器。

为了记录，这里是我目前拥有的工作代码。我更改了函数名称以更准确并移动了＆＃34;添加事件监听器＆＃34;部分到功能之外。

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();
    }
});

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

2 个答案: