使iframe自动调整高度根据内容而不使用滚动条?

例如:

<iframe name="Stack" src="http://stackoverflow.com/" width="740"
        frameborder="0" scrolling="no" id="iframe"> ...
</iframe>

我希望它能够根据里面的内容来调整它的高度，而不使用滚动。

当前回答

您可以使用这个库，它既能正确地调整iframe的初始大小，也能通过检测iframe内容的大小变化(通过setInterval中的常规检查或通过MutationObserver)并调整它来保持它在正确的大小。

https://github.com/davidjbradshaw/iframe-resizer

他们也是一个React版本。

https://github.com/davidjbradshaw/iframe-resizer-react

这适用于交叉和相同域的iframe。

2014-02-02 20:52:36

其他回答

jq2('#stocks_iframe').load(function(){
var iframe_width = jq2('#stocks_iframe').contents().outerHeight() ; 
jq2('#stocks_iframe').css('height',iframe_width); });

<iframe id='stocks_iframe' style='width:100%;height:0px;' frameborder='0'>

2015-05-04 08:52:11

我在过去调用iframe时遇到过问题。onload用于动态创建iframe，所以我用这种方法来设置iframe大小:

iFrame视图

var height = $("body").outerHeight();
parent.SetIFrameHeight(height);

主要的观点

SetIFrameHeight = function(height) {
    $("#iFrameWrapper").height(height);
}

(这只会工作，如果两个视图在同一个域)

2014-02-25 14:29:08

这适用于我(也与多个iframe在一个页面):

$('iframe').load(function(){$(this).height($(this).contents().outerHeight());});

2015-05-17 06:57:08

<script type="text/javascript">
  function resizeIframe(obj) {
    obj.style.height = 0;
    obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
  }
</script>

这是不工作的chrome。但是在firefox上工作。

2014-10-05 14:59:16