根据内容的高度调整 iFrame 的大小只能放大？答案

【问题标题】：Resizing iFrames based on its contents' height only working to enlarge?根据内容的高度调整 iFrame 的大小只能放大？
【发布时间】：2017-08-01 15:06:44
【问题描述】：

看看随附的 codepen 以了解我的意思。尝试减小浏览器的宽度，框架应正确调整大小。然后最大化您的浏览器窗口并注意框架不会重新调整其高度。

我有多个框架堆叠在一起，所以这是一个非常烦人的问题。

我尝试使用 .height()、.outerHeight()、.innerHeight()、.scrollHeight 和 .clientHeight 均无济于事。

https://codepen.io/anon/pen/gxaLPW

var newHeight = $('#frame').contents().height();  
$('#frame').attr('height', newHeight);

提前感谢您的任何/所有帮助！

【问题讨论】：

这是一个超级烦人的问题。我们过去曾使用过这个库来绕过它； github.com/davidjbradshaw/iframe-resizer - 您需要访问父页面和子页面。不过，即使配置正确，它也能很好地工作，即使是通过跨源。我会推荐它。

标签： javascript jquery html iframe

【解决方案1】：

试试这个

function resizeFrame() {
  var newHeight = $('#frame').contents().find("body").height();
  $('#frame').attr('height', newHeight + 20);
}

【讨论】：

是的，应该可以工作 - 但不幸的是，我不能依赖框架将显示的标记中的 body 元素。
所以假设它应该可以工作，但它没有 - codepen.io/chavag/pen/YxypOQ
你没有加newHeight + 20所以会有滚动

【解决方案2】：

试试这个

<script type="text/javascript">
var $ = jQuery.noConflict();
$(document).ready(function() {
    $(function($){
      var lastHeight = 0, curHeight = 0, $frame = $('iframe:eq(0)');
      setInterval(function(){
        curHeight = $frame.contents().find('body').height();
        if ( curHeight != lastHeight ) {
          $frame.css('height', (lastHeight = curHeight) + 'px' );
          $frame.css('border-width', 0 + 'px' );
        }
      },0);
    });
});

【讨论】：