根据内容调整iframe高度

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

我在第一次两个选项卡（myiframe1和myiframe2）

我在不同iframe的onload事件调用上面的代码要3个jQuery的标签和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>

这在谷歌浏览器和IE8中正常工作。但在Firefox中，第一个选项卡（可见选项卡）中的iframe具有每个内容的高度，而第二个选项卡中的iframe没有设置适当的高度。第二个标签的高度设置为10px。

这里有什么问题？

来源

2009-11-19 Prasad

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

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

jquery ui docs - tabs - faq

来源

2009-11-19 10:53:07 Karsten

优秀。这个提示很有效。 – Prasad 2009-11-19 11:29:16

你可以试试这个：

选择iframe的要调整第一（所以当它成为可见它得到的高度）选项卡，然后选择第一个（电流）再次标签：

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

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

来源

2009-11-19 10:39:55 gpilotino

根据内容调整iframe高度

回答

相关问题