Question

我正在使用以下脚本自动调整iframe高度。

function autoIframe(frameId) {
  try {
    frame = document.getElementById(frameId);
    innerDoc = (frame.contentDocument) ?
               frame.contentDocument : frame.contentWindow.document;
    objToResize = (frame.style) ? frame.style : frame;
    objToResize.height = innerDoc.body.scrollHeight + 10 + 'px';
  }
  catch (err) {
    window.status = err.message;
  }
}

我在前两个标签中有三个jquery标签和iframe（myiframe1和myiframe2）

我在iframes的onload上调用上面的代码，如。

<iframe id="myiframe1" width="100%" onload="autoIframe('myiframe1');"
        scrolling="auto" frameborder="0" src="mypath1">
</iframe>

<iframe id="myiframe2" width="100%" onload="autoIframe('myiframe2');"
        scrolling="auto" frameborder="0" src="mypath2">
</iframe>

这在Google Chrome和IE8中运行良好。但是在Firefox中，第一个标签（可见标签）中的iframe具有内容的高度，第二个标签中的iframe未设置正确的高度。第二个选项卡的高度设置为10px。

这里有什么问题？

Answer 1

display:none元素的高度为0 iirc，但jquery提供了一种“不隐藏但将标签内容移出屏幕”的方法。

您可以在此处找到文档/示例：

jquery ui docs - tabs - faq

Answer 2

你可以试试这个：

首先选择要调整大小的iframe的标签（所以当它变得可见时它会变高）然后再次选择第一个（当前）标签：

$('#tabs').tabs('select', 2);
// adjust second tab iframe height here 
$('#tabs').tabs('select', 1);

（可能不可见/未选中标签内容的高度为0，因此调整大小不起作用。）

根据内容调整iframe高度

2 个答案: