Question

我已经创建了一个网站的单独部分，我们通过iframe加载到joomla网站，但我想调整iframe容器的高度。

因此我试图使用以下代码检索我的html的高度，该代码工作正常（从iframe内部调用）：

$(document).ready(function() {
    var height = $(document).height();
    alert( height );
});

所有页面都会正确警告高度。

当我调整iframe容器的高度时，问题就出现了。当我使用这段代码时：

$(document).ready(function() {
    var height = $(document).height();
    alert( height );
    parent.document.getElementById('blockrandom').style.height = height + 'px';
});

现在高度将与之前的高度相同或更大，因此当您从高度为900px的页面转到500px之一时，高度将保持为900px（同样在警报中）。从小到大都很好。

提前致谢！

Answer 1

是的，我发现一旦调整了高度，使用native属性或jQuery没有区别，结果高度值似乎不会反映新设置的值。因此，为了在同一页面交互过程中动态调整元素，到目前为止，我不得不求助于高度的启发式算法。

我最终评估元素中的内容并构建一个可接受的（如果不是完全准确的）代理高度值。例如，假设我有一个原始设置为22个标签字段的盒子。

当用户调整父值或选项时，我可能会得到0到满22之间的任意数量的结果字段。

因此，如果我在一些用户事件后剩下10个，我运行一个函数来计算可见元素并计算高度。所以10个字段x 22像素意味着我将包含元素重新调整为大约220个像素。

具体来说，我有一个抽象函数，我在其中指定一个默认高度，一个基本高度（允许一些总是暴露不可调整的元素，如文本/指令，等等），以及元素高度乘数。

在加载和事件之间，我将元素容器设置为默认高度。在对可变元素进行计数之后，我通过将可变元素乘以乘数并将其与基础高度相加来计算该值。

到目前为止，这是我能做的最好的，而且非常简单。使用jQuery选择器，它只需要几行来计算，而另外几行来计算和设置高度。

注意：值得注意的是，这仅适用于不通过内容自动调整高度的元素。对此最大的攻击者是jQuery选项卡，在我的情况下，会出现此问题。大多数非操纵的相对高度元素会自动调整其空间，因为元素在display = block || none之间切换。

以下是一些示例代码：

setElemHeight = function(options) { 
    var _elem = options.containerElement;
    var _nBase = options.nBaseHeight;
    var _nMltplr = options.nMultiplierHeight;
    // COUNT ROWS
    var _nCnt = 0;
    $( '#' + _elem.id + ' div div:first-child  > input').each( function() { 
        if(this.style.display != 'none') _nCnt++; 
    });
    $(_elem).height(_nBase + (_nCnt * _nMltplr));
}

为了我的目的，我已经抽出了足够的东西，但你可以把它放得更远，所以选择器子元素是动态的。

之前设置时Jquery高度不正确

1 个答案: