使iframe自动调整高度根据内容而不使用滚动条?

例如:

<iframe name="Stack" src="http://stackoverflow.com/" width="740"
        frameborder="0" scrolling="no" id="iframe"> ...
</iframe>

我希望它能够根据里面的内容来调整它的高度，而不使用滚动。

当前回答

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

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

<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或其他类似的，您可以使用这个，但您必须设置类。也只能使用时，全高度是适当的。

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

2016-01-03 16:51:13

其他回答

我是用AngularJS做的。Angular没有ng-load，但是创建了一个第三方模块;安装下面的凉亭，或在这里找到它:https://github.com/andrefarzat/ng-load

获取ngLoad指令:bower install ng-load——save

设置你的iframe:

<iframe id="CreditReportFrame" src="about:blank" frameborder="0" scrolling="no" ng-load="resizeIframe($event)" seamless></iframe>

控制器resizeIframe功能:

$scope.resizeIframe = function (event) {
    console.log("iframe loaded!");
    var iframe = event.target;
    iframe.style.height = iframe.contentWindow.document.body.scrollHeight + 'px';
};

2014-11-04 20:55:25

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

jQuery:

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

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

CSS:

body {
  height: auto;
  overflow: auto
}

2015-01-20 15:54:01

在IE11上试试这个

<iframe name="Stack" src="http://stackoverflow.com/" style='height: 100%; width: 100%;' frameborder="0" scrolling="no" id="iframe">...</iframe>

2015-12-09 22:09:27

将此添加到<head>部分:

<script>
  function resizeIframe(obj) {
    obj.style.height = obj.contentWindow.document.documentElement.scrollHeight + 'px';
  }
</script>

把你的iframe改成这样:

<iframe src="..." frameborder="0" scrolling="no" onload="resizeIframe(this)" />

在现场讨论中发现。

2012-04-02 12:20:22

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

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

<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>

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

2016-01-03 16:51:13

使iframe自动调整高度根据内容而不使用滚动条?

推荐文章

最新文章

标签