我已经尝试了一些关于这个iframe自动高度问题的答案 .

基本上，我想要的是根据iframe内部的内容高度自动调整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就在那里 . ）

任何人都可以帮我弄清楚，为什么这些代码不起作用？谢谢 .

2 回答

Snippet当然不起作用，我只是把它放在那里以满足帖子的要求 . 请阅读本README.md并查看Plunker demo . 所有细节都在README.md中，并在此处发布 .

README.md

iFrame动态高度

此演示在同源策略下工作，简单地说，父子页面必须位于同一位置：

相同协议（http：//）
相同的子域（http://app . ）
相同域名（http://app.domain.com）
相同端口（http://app.domain.com:80）
有3个不同高度的儿童页面 .
iFrm1，html
iFrm2.html
iFrm3.html
当我们要控制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" width="100%" height="100%" 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));
}

//如果加载窗口加载，iFrames不应该有任何超时 .

window.onload = loadiFrames;

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

SNIPPET

<!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" width="100%" height="100%" scrolling="no" frameborder="0"></iframe>
    </div>
    <div id="i2" class="jFrame">
      <iframe id="iFrm2" src="iFrm2.html" width="100%" height="100%" scrolling="no" frameborder="0"></iframe>
    </div>
    <div id="i3" class="jFrame">
      <iframe id="iFrm3" src="iFrm3.html" width="100%" height="100%" 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>

回复于 2024-04-29T18:50:04+08:00

1

另一位用户多年前在StackOverflow上发布了这个问题和解决方案 .

Full-screen iframe with a height of 100%

此方法使用CSS而不是JS来设置IFRAME的维度 .

回复于 2024-04-29T18:50:04+08:00

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

2 回答

README.md

iFrame动态高度

CSS：

iFrame：

相关问题