根据内容调整 iframe 高度

Posted 2023-03-06

【中文标题】根据内容调整 iframe 高度

【英文标题】：adjust iframe height based on the content

【发布时间】：2010-12-18 06:05:01

【问题描述】：

我正在使用以下脚本自动调整 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;
  

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

我在加载 iframe 时调用上述代码。

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

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

这在谷歌浏览器和 IE8 中运行良好。 但在 Firefox 中，第一个选项卡（可见选项卡）中的 iframe 具有根据内容的高度，而第二个选项卡中的 iframe 未设置正确的高度。第二个标签的高度设置为 10px。

这里可能有什么问题？

【参考方案1】：

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

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

jquery ui docs - tabs - faq

【参考方案2】：

你可以试试这个：

首先选择要调整大小的 iframe 的选项卡（因此当它变得可见时，它会获得一个高度），然后再次选择第一个（当前）选项卡：

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

（可能不可见/未选择的选项卡内容的高度为 0，因此无法调整大小）。