如果你可以使用固定的纵横比，并且你想要一个响应式iframe，这段代码将对你很有用。这只是CSS规则。

.iframe-container {
  overflow: hidden;
  /* Calculated from the aspect ration of the content (in case of 16:9 it is 9/16= 
  0.5625) */
  padding-top: 56.25%;
  position: relative;
}
.iframe-container iframe {
  border: 0;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

iframe必须有一个div作为容器。

<div class="iframe-container">
   <iframe src="http://example.org"></iframe>
</div>

源代码是基于这个网站和Ben Marshall有一个很好的解释。

上下文

我不得不在网络扩展的环境中自己做这件事。这个web扩展在每个页面中注入了一些UI，并且这个UI存在于一个iframe中。iframe内部的内容是动态的，所以我必须重新调整iframe本身的宽度和高度。

我使用React，但这个概念适用于每个库。

我的解决方案(这假设您同时控制页面和iframe)

在iframe内部，我改变了车身样式，使其具有真正大的尺寸。这将允许内部元素布局使用所有必要的空间。使宽度和高度100%不适合我(我猜是因为iframe有一个默认的宽度= 300px和高度= 150px)

/* something like this */
body {
  width: 99999px;
  height: 99999px;
}

然后我把所有的iframe UI注入到一个div中，并给它一些样式

#ui-root {
  display: 'inline-block';     
}

在渲染我的应用程序在这个#ui-root(在React中，我在componentDidMount中这样做)后，我计算这个div的尺寸，并使用window.postMessage将它们同步到父页面:

let elRect = el.getBoundingClientRect()
window.parent.postMessage({
  type: 'resize-iframe',
  payload: {
    width: elRect.width,
    height: elRect.height
  }
}, '*')

在父框架中，我这样做:

window.addEventListener('message', (ev) => {
  if(ev.data.type && ev.data.type === 'resize-iframe') {
    iframe.style.width = ev.data.payload.width + 'px'
    iframe.style.height = ev.data.payload.height + 'px'
  }
}, false)

嵌入式的一行程序解决方案: 从最小大小开始，增加到内容大小。不需要脚本标记。

<iframe src="http://URL_HERE.html" onload='javascript:(function(o){o.style.height=o.contentWindow.document.body.scrollHeight+"px";}(this));' style="height:200px;width:100%;" > < / iframe >

<script type="application/javascript">

function resizeIFrameToFitContent( iFrame ) {

    iFrame.width  = iFrame.contentWindow.document.body.scrollWidth;
    iFrame.height = iFrame.contentWindow.document.body.scrollHeight;
}

window.addEventListener('DOMContentLoaded', function(e) {

    var iFrame = document.getElementById( 'iFrame1' );
    resizeIFrameToFitContent( iFrame );

    // or, to resize all iframes:
    var iframes = document.querySelectorAll("iframe");
    for( var i = 0; i < iframes.length; i++) {
        resizeIFrameToFitContent( iframes[i] );
    }
} );

</script>

<iframe src="usagelogs/default.aspx" id="iFrame1"></iframe>

可以创建一个“幽灵般的”IFrame，就像它不存在一样。

参见http://codecopy.wordpress.com/2013/02/22/ghost-iframe-crossdomain-iframe-resize/

中描述的事件系统parent.postMessage(..) https://developer.mozilla.org/en-US/docs/DOM/window.postMessage

这适用于所有现代浏览器!

最简单的方法是设置iframe的高度，如果你知道文档的高度是什么，如果它是固定的。