1

我已经制作了一个网站的单独部分，我们通过 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';
});

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

提前致谢！

4

1 回答 1

0

是的，我发现一旦调整高度，使用本机属性或 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));
}

我已经为我的目的抽象了足够多的内容，但是您可以将其抽象得更远一些，以便选择器子元素是动态的。

于 2012-10-18T16:25:52.173 回答