how to increase iframe height when tab selected containts long content答案

【问题标题】：how to increase iframe height when tab selected containts long contenthow to increase iframe height when tab selected containts long content
【发布时间】：2026-01-01 21:45:01
【问题描述】：

我已将 iframe 包含到其他网页中，如下所示

<script type="text/javascript">window.addEventListener("message", function(e){var $iframe=document.getElementById("my-iframe"); var eventName=e.data[0]; var data=e.data[1];switch(eventName){case "setHeight": $iframe.height=parseInt(data); break; case "scrollToTop": $iframe.scrollIntoView(); break;}}, false);
</script>

<div style="width:100%; text-align:left;" >
<iframe src="http://mywebpage.com/list?mode=iframe" frameborder="0" height="1000" width="100%" vspace="0" hspace="0" marginheight="5" marginwidth="5" scrolling="no" allowtransparency="true" id="my-iframe"></iframe>
</div>

我在 iframe 页面中有三个标签，第一个标签包含没有长内容的数据，但第三个标签包含长内容。当我打开第三个选项卡时，iframe 高度不会增加。首次加载时 iframe 高度保持不变，剩余页面的内容被隐藏。我怎样才能解决这个问题？我已使用 TBHTML 选项卡进行选项卡渲染，如下所示。

echo TbHtml::tabbableTabs($tabs);

【问题讨论】：

标签： javascript jquery html iframe yii

【解决方案1】：

你可以使用 iframe-resizer jquery 插件来解决这个问题

http://davidjbradshaw.github.io/iframe-resizer/

例子

http://davidjbradshaw.com/iframe-resizer/example/

【讨论】：

【解决方案2】：

为此，您可以使用以下代码

document.getElementById("my-iframe").height = (document.getElementById('my-iframe').contentWindow.document.body.scrollHeight) + 'px';

【讨论】：