jquery - 根据内容调整iframe高度

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)

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

<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