根据内容调整iframe高度

我使用以下脚本自动调整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上调用上面的代码。

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

这可能是什么问题？

Answer 1

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

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

jquery ui docs – tabs – faq

Answer 2

你可以试试这个：

选择要首先resize的iframe的选项卡（这样当它变得可见时它会获得高度）然后再次选择第一个（当前）选项卡：

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

（可能不可见/未选定的选项卡内容的高度为0，因此resize不起作用）。