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

例如:

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

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

当前回答

您可以使用这个库，它既能正确地调整iframe的初始大小，也能通过检测iframe内容的大小变化(通过setInterval中的常规检查或通过MutationObserver)并调整它来保持它在正确的大小。

https://github.com/davidjbradshaw/iframe-resizer

他们也是一个React版本。

https://github.com/davidjbradshaw/iframe-resizer-react

这适用于交叉和相同域的iframe。

2014-02-02 20:52:36

其他回答

将此添加到<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

以下是精简版:

<iframe src="hello.html" sandbox="allow-same-origin"
        onload="this.style.height=(this.contentWindow.document.body.scrollHeight+20)+'px';">
</iframe>

2015-08-23 02:01:35

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

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

<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

在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

hjpotter92的建议在safari中不起作用! 我对脚本做了一个小的调整，所以它现在也可以在Safari中工作。

唯一的改变是在每次加载时将高度重置为0，以使某些浏览器能够降低高度。

将这个添加到<head>标签:

<script type="text/javascript">
  function resizeIframe(obj){
     obj.style.height = 0;
     obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
  }
</script>

并将以下onload属性添加到iframe，如下所示

<iframe onload='resizeIframe(this)'></iframe>

2013-12-21 18:30:49

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

推荐文章

最新文章

标签