我稍微修改了上面Garnaph的解决方案。似乎他的解决方案根据事件发生前的大小修改了iframe的大小。对于我的情况(通过iframe提交电子邮件)，我需要在提交后立即改变iframe的高度。例如，在提交后显示验证错误或“谢谢”消息。

我只是消除了嵌套的click()函数，并将其放入我的iframe html:

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

对我来说有用，但不确定跨浏览器功能。

我不知道为什么每个人都只使用js

CSS fit-content可以解决这个问题

iframe{
    height:fit-content;
    width: fit-content;
}

到目前为止给出的所有解决方案都只考虑一次调整大小。您提到希望能够在修改内容后调整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>

如果你正在寻找一个没有jQuery跨起源的解决方案，你可能想看看我的想法:

<main id="container"></main>
<script>
  fetch('https://example.com').then(response => {
    return response.text();
  }).then(data => {
    const iframeContainer = window.document.getElementById('container');
    const iframe = document.createElement('iframe');
    iframe.frameBorder = 'none';
    iframe.width = '100%';
    iframe.addEventListener("load", function() {
      iframe.height = iframe.contentWindow.document.body.scrollHeight;
    })
    const finalHtml = data;
    const blob = new Blob([finalHtml], {type: 'text/html'});
    iframe.src = window.URL.createObjectURL(blob);
    iframeContainer.appendChild(iframe);
  })
</script>

在jQuery中，这是我最好的选择，这真的帮助了我!!我等待着帮助你!

iframe

<iframe src="" frameborder="0" id="iframe" width="100%"></iframe>

jQuery

<script>            
        var valueSize = $( "#iframe" ).offset();
        var totalsize = (valueSize.top * 2) + valueSize.left;

        $( "#iframe" ).height(totalsize);            

</script>

下面是一个跨浏览器的解决方案，如果你不想使用jQuery:

/**
 * Resizes the given iFrame width so it fits its content
 * @param e The iframe to resize
 */
function resizeIframeWidth(e){
    // Set width of iframe according to its content
    if (e.Document && e.Document.body.scrollWidth) //ie5+ syntax
        e.width = e.contentWindow.document.body.scrollWidth;
    else if (e.contentDocument && e.contentDocument.body.scrollWidth) //ns6+ & opera syntax
        e.width = e.contentDocument.body.scrollWidth + 35;
    else (e.contentDocument && e.contentDocument.body.offsetWidth) //standards compliant syntax – ie8
        e.width = e.contentDocument.body.offsetWidth + 35;
}