如何在HTML5中设置iframe height：auto [英] How to set iframe height:auto in HTML5

问题描述

我正在努力使iframe高度自动（100％），所以搜索了很多例子。

I'm trying to make iframe height auto(100%), so searched lot of examples.

但问题是......它运作不佳在IE中，仅适用于Chrome。

But the problem is... it does not working good in IE, only works in Chrome.

<div class="stockIframe ">
<iframe src="http://google.com" onload="autoResize(this)" height="100%" width="100%"></iframe> 
</div>

html,body { height: 100% }
.stockIframe {  width:100%; height:100%; }
.stockIframe iframe {  width:100%; height:100%; border:0;overflow:hidden }


<script>
function autoResize(i)
{
    var iframeHeight=
    (i).contentWindow.document.body.scrollHeight;
    (i).height=iframeHeight+20;
}


</script>

任何人都知道如何修复它？

Anyone know how to fix it ?

推荐答案

我的代码中没有问题，但不要忘记样式标记

I see no problem in your code, but don't forget the style tag

我在IE 11上进行了测试，它确实有效。

I tested it on IE 11 and it works.

<div class="stockIframe ">
    <iframe src="http://google.com" onload="autoResize(this)" height="100%" width="100"></iframe> 
</div>

<style>
   html,body { height: 100% }
   .stockIframe {  width:100%; height:100%; }
   .stockIframe iframe {  width:100%; height:100%; border:0;overflow:hidden }
</style>

<script>
   function autoResize(i) {
     var iframeHeight=
     (i).contentWindow.document.body.scrollHeight;
     (i).height=iframeHeight+20;
   } 
</script>

这篇关于如何在HTML5中设置iframe height：auto的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！