上下文

我不得不在网络扩展的环境中自己做这件事。这个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，就像它不存在一样。

参见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的大小。为此，您需要在iFrame中执行一个函数(一旦内容被更改，您需要触发一个事件来说明内容已更改)。

我被这个问题困扰了一段时间，因为iFrame内的代码似乎仅限于iFrame内的DOM(并且不能编辑iFrame)，而在iFrame外执行的代码则被iFrame外的DOM卡住(并且不能从iFrame内接收事件)。

解决方案来自于发现(通过同事的帮助)jQuery可以被告知使用什么DOM。在本例中，父窗口的DOM。

因此，这样的代码做了你所需要的(当在iFrame中运行时):

<script type="text/javascript">
    jQuery(document).ready(function () {
        jQuery("#IDofControlFiringResizeEvent").click(function () {
            var frame = $('#IDofiframeInMainWindow', window.parent.document);
            var height = jQuery("#IDofContainerInsideiFrame").height();
            frame.height(height + 15);
        });
    });
</script>

如果内容只是一个非常简单的html，最简单的方法是用javascript删除iframe

HTML代码:

<div class="iframe">
    <iframe src="./mypage.html" frameborder="0" onload="removeIframe(this);"></iframe>
</div>

Javascript代码:

function removeIframe(obj) {
    var iframeDocument = obj.contentDocument || obj.contentWindow.document;
    var mycontent = iframeDocument.getElementsByTagName("body")[0].innerHTML;
    obj.remove();
    document.getElementsByClassName("iframe")[0].innerHTML = mycontent;
}

跨浏览器jQuery插件。

cross -bowser, cross - domain library，使用mutationObserver来保持iFrame的大小与内容一致，使用postMessage在iFrame和主机页面之间进行通信。使用或不使用jQuery。

使用bootstrap的嵌入响应类，它最初是为youtube视频，但你可以调整它的高度。

如果你不能使用javascript，我建议使用引导和玩周围的嵌入响应-***类的html。我能够通过添加填充底部作为百分比来实现同样的效果，从而进一步相应地调整它。

<span class="iframe embed-responsive embed-responsive-16by9" style="display:block; padding-bottom: 10%;">
<iframe class="embed-responsive-item" width="100%" scrolling="no" src="example.com" frameBorder="0" ></iframe>
</span>