根据内容调整iframe高度 [英] adjust iframe height based on the content

问题描述

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

I am using the following script to adjust the iframe height automatically.

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）

I have three jquery tabs and iframes in first two tabs(myiframe1 and myiframe2)

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

I am calling the above code at onload of the iframes like.

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

This works fine in google chrome and IE8. But in firefox, the iframe in first tab(visible tab) has the height as per the content and the iframe in second tab is not set with the proper height. The height of the second tab is set to 10px.

这里可能出现什么问题？

What may the problem here?

推荐答案

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

display:none elements have a height of 0 iirc, but jquery offers a way to "not hide but move tab-content out of screen".

您可以在这里找到文档/示例：

You can find documentation/example here:

jquery ui docs - tabs - faq

这篇关于根据内容调整iframe高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！