iframe 自动调整其高度以适应内容高度

Posted 2023-03-05

技术标签:

【中文标题】iframe 自动调整其高度以适应内容高度【英文标题】：iframe auto adjusting its height to fit to the content height 【发布时间】：2016-06-13 08:30:24 【问题描述】：

我已经尝试了一些关于 iframe 自动高度问题的提示。

基本上，我想要的是根据 iframe 内内容的高度自动调整 iframe 的高度。

这是我尝试过的具体方法。

Resizing an iframe based on content

How to auto-size an iFrame?

iframe Auto Adjust Height as content changes

id 为 #iframe 的 iframe 需要自动调整内容的高度，因此我将以下代码分别插入到父文档和 iframe 的正文中。

<script>
  // Resize iframe to full height
  function resizeIframe(height)
  
// "+60" is a general rule of thumb to allow for differences in
// IE & and FF height reporting, can be adjusted as required..
document.getElementById('iframe').height = parseInt(height)+60;
  
</script>

到 iframe

<body onload="iframeResizePipe()">
<iframe id="helpframe" src='' height='0' width='0' frameborder='0'> </iframe>

  <script type="text/javascript">
  function iframeResizePipe()
 
            // What's the page height?
     var height = document.body.scrollHeight;

 // Going to 'pipe' the data to the parent through the helpframe..
 var pipe = document.getElementById('helpframe');

 // Cachebuster a precaution here to stop browser caching interfering
 pipe.src = 'http://www.foo.com/helper.html?height='+height+'&cacheb='+Math.random();

  
</script>

这是我遇到问题的网站：http://xefrontier.com

（如果您单击“WALL”选项卡，iframe 就在其中。）

谁能帮我弄清楚，为什么这些代码不起作用？谢谢。

【问题讨论】：

将 iframe 高度设置为 100%，现在只有 200 像素 @zer00ne 啊。是的，我将高度调整为 100%，但仍然没有运气。我也会重试其他一些技巧，看看我是否遗漏了什么。这只是少数需要改变的事情之一。你知道#tab-2 的 CSS 吗？包含 iframe 的 div 很重要。 @zer00ne 我认为#tabs-2 没有设置 css 属性。但我可以尝试给它高度：100%。但即便如此，iframe 的高度也不会真正改变。好的，看看我的回答，祝你好运，先生。 【参考方案1】：

片段当然不起作用，我只是把它放在那里以满足职位要求。请阅读此README.md 并查看Plunker demo。所有详细信息都在README.md 并发布在这里。

README.md

iFrame 动态高度

这个demo是在同源策略下工作的，简单来说就是父子页面必须在同一个位置：

相同的端口 (http://app.domain.com:80)

有 3 个不同高度的子页面。

当我们要控制 iframe 时，准备布局和 iframe 属性很重要。

CSS：

/* Outer Container */

#iSec 
  width: 100vw;  /* As wide as your screen */
  height: 100vh; /* As tall as your screen */
  display: table;/* Will behave like a table */



/* iFrame Wrappers */

.jFrame 
   position: relative; /* As a non-static element, any descendants can be easily positioned. */
   max-height: 100%; /* Being flexible is important when dealing with dynamic content. */
   max-width: 100%; /* see above */
   overflow-y: auto; /* Scrollbars will appear when height exceeds the viewport (your screen)*/
   display: table-cell; /* Will behave like a table-cell


/* iFrames */

iframe 
   position: absolute; /* Easily positioned within it's parent (`.jFrame`)*/
   width: 100%; /* Set the iFrames' attribute as well */
   height: 100%; /* Set the iFrames' attribute as well */

   top: 0;  /* Streches iframes' edges */
   left: 0;
   bottom: 0;
   right: 0;

iFrame：

<iframe id="iFrm1" src="iFrm1.html"   scrolling="no" frameborder="0"></iframe>

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

我借用和修改的大部分代码来自这个site

//将所有iframe收集到一个NodeList中，转换成数组，然后调用iFrmHt()，传递每个iFrame的id。

function loadiFrames() 
  var iFrmList = document.querySelectorAll('iframe');
  var iFrmArray = Array.prototype.map.call(iFrmList, function(obj) 
    var ID = obj.id;
    iFrmHt(ID);
  );

//引用目标iFrame的Document

function iFrmHt(ID) 
  var iFrm = document.getElementById(ID);
  var iDoc = iFrm.contentDocument || iFrm.contentWindow.document;
  var iHt = function(iDoc) 
    if (!iDoc) 
      iDoc = document;
    
    var iKid = iDoc.body;
    var iRoot = iDoc.documentElement;

// 确定iFrame的子页面--高度用几种不同的方法来测量。

    var iHt = Math.max(iKid.scrollHeight, iKid.offsetHeight,
      iRoot.clientHeight, iRoot.scrollHeight, iRoot.offsetHeight);
    return iHt;

// 改变 iFrame 的高度

  iFrm.style.height = iHt + 'px';
  console.log('iFrame: ' + iFrm.id);
  console.log('height: ' + iHt(iDoc));

// 如果您在窗口加载时加载，则 iFrame 不应该有任何超时。

window.onload = loadiFrames;

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

片段

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>iFrame Dynamic Height</title>
  <style>
    #iSec 
      width: 100vw;
      height: 100vh;
      display: table;
    
    .jFrame 
      position: relative;
      max-height: 100%;
      max-width: 100%;
      overflow-y: auto;
      display: table-cell;
    
    iframe 
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
    
  </style>
</head>

<body>
  <section id="iSec">
    <div id="i1" class="jFrame">
      <iframe id="iFrm1" src="iFrm1.html"   scrolling="no" frameborder="0"></iframe>
    </div>
    <div id="i2" class="jFrame">
      <iframe id="iFrm2" src="iFrm2.html"   scrolling="no" frameborder="0"></iframe>
    </div>
    <div id="i3" class="jFrame">
      <iframe id="iFrm3" src="iFrm3.html"   scrolling="no" frameborder="0"></iframe>
    </div>
  </section>

  <script>
    function loadiFrames() 
      var iFrmList = document.querySelectorAll('iframe');
      var iFrmArray = Array.prototype.map.call(iFrmList, function(obj) 
        var ID = obj.id;
        iFrmHt(ID);
      );
    

    function iFrmHt(ID) 
      var iFrm = document.getElementById(ID);
      var iDoc = iFrm.contentDocument || iFrm.contentWindow.document;
      var iHt = function(iDoc) 
        if (!iDoc) 
          iDoc = document;
        
        var iKid = iDoc.body;
        var iRoot = iDoc.documentElement;
        var iHt = Math.max(iKid.scrollHeight, iKid.offsetHeight,
          iRoot.clientHeight, iRoot.scrollHeight, iRoot.offsetHeight);
        return iHt;
      
      iFrm.style.height = iHt + 'px';
      console.log('iFrame: ' + iFrm.id);
      console.log('height: ' + iHt(iDoc));
    

    window.onload = loadiFrames;
  </script>
</body>

</html>

【讨论】：

【参考方案2】：

几年前，另一个用户在 *** 上发布了这个问题和解决方案。

Full-screen iframe with a height of 100%

这种方法使用 CSS 而不是 JS 来设置 IFRAME 的尺寸。

【讨论】：

以上是关于iframe 自动调整其高度以适应内容高度的主要内容，如果未能解决你的问题，请参考以下文章

如何让 UITableViewCell 调整高度以适应其内容？

CSS3：调整 iframe 的高度以适合其内容

iframe的高度可以随内容的多少而变化吗

自动调整多个文本区域的高度以适应加载的内容

jQuery解决iframe高度自适应代码

如何让iframe自适应高度