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

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

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

以下是我尝试过的具体内容。

根据内容调整iframe大小

如何自动调整iFrame的大小？

iframe在内容更改时自动调整高度

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

 // 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; }  

和iframe

     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(); }  

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

（如果单击“WALL”选项卡，iframe就在那里。）

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

Answer 1

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

README.md

iFrame动态高度

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

1. 相同的协议（http：//）
2. 相同的子域（ http：// app 。）
3. 相同的域名（ http://app.domain.com ）

4. 相同的端口（ 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收集到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

Answer 2

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

全屏iframe，高度为100％

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