jQuery的.contents()方法允许我们在DOM树中搜索元素的直接子元素。

jQuery:

$('iframe').height( $('iframe').contents().outerHeight() );

记住，在iframe内的页面主体必须有它的高度

CSS:

body {
  height: auto;
  overflow: auto
}

jQuery的.contents()方法允许我们在DOM树中搜索元素的直接子元素。

jQuery:

$('iframe').height( $('iframe').contents().outerHeight() );

记住，在iframe内的页面主体必须有它的高度

CSS:

body {
  height: auto;
  overflow: auto
}

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

iFrame视图

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

主要的观点

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

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

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

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

避免使用内联JavaScript;你可以使用一个类:

<iframe src="..." frameborder="0" scrolling="auto" class="iframe-full-height"></iframe>

用jQuery引用它:

$('.iframe-full-height').on('load', function(){
    this.style.height=this.contentDocument.body.scrollHeight +'px';
});

这对我来说很有效(大多数情况下)。

把这个放在你的页面底部。

<script type="application/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>

<script type="application/javascript" src="/script/jquery.browser.js">
</script>

<script type="application/javascript" src="/script/jquery-iframe-auto-height.js">
</script>

<script type="application/javascript"> 
  jQuery('iframe').iframeAutoHeight();
  $(window).load(
      function() {
          jQuery('iframe').iframeAutoHeight();  
      }
  );

  // for when content is not html e.g. a PDF
  function setIframeHeight() {
      $('.iframe_fullHeight').each(
          function (i, item) {
              item.height = $(document).height();
          }
      );
  };

  $(document).ready( function () {
      setIframeHeight();
  });
  $(window).resize( function () {
      setIframeHeight();
  });
</script> 

前半部分来自??，当iframe中有HTML时才生效。 当iframes类为iframe_fullHeight时，后半部分将iframe设置为页面高度(而不是内容高度)。如果内容是PDF或其他类似的，您可以使用这个，但您必须设置类。也只能使用时，全高度是适当的。

注意:由于某些原因，当它在调整窗口大小后重新计算时，它得到了错误的高度。