选中标签时如何增加iframe高度包含长内容

Question

我已将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);

Answer 1

您可以使用iframe-resizer jquery插件来解决此问题

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

示例

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

Answer 2

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

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