iframe自动调整其高度以适合内容高度 [英] iframe auto adjusting its height to fit to the content height

查看：139
本文介绍了iframe自动调整其高度以适合内容高度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述



基本上，我想要的是自动调整iframe的高度，我们已经尝试了一些关于iframe自动调整高度问题的提示。根据iframe内容的高度。



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



根据内容调整iframe的大小



如何自动调整iFrame大小？



iframe Auto在内容发生变化时调整高度



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

 < script> 
 //将iframe调整为全高
函数resizeIframe（高度）
 {
 //+60是允许
差异的一般经验法则// IE&和FF高度报告，可以根据需要进行调整.. 
 document.getElementById（'iframe'）。height = parseInt（height）+60; 
} 
< / script>

和iframe 

 < body onload =iframeResizePipe（）> 
< iframe id =helpframesrc =''height ='0'width ='0'frameborder ='0'> < / iframe中> 
 
< script type =text / javascript> 
函数iframeResizePipe（）
 {
 //页面高度是多少？ 
 var height = document.body.scrollHeight; 
 
 //通过帮助框将数据管道化到父项。
 var pipe = document.getElementById（'helpframe'）; 
 
 // Cachebuster在这里采取一种预防措施来阻止浏览器缓存干扰
 pipe.src ='http://www.foo.com/helper.html?height='+height+'& cacheb ='+的Math.random（）; 
 
} 
< / script>

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



（如果您点击 WALL'选项卡，iframe在那里。）



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

解决方案

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



README.md



iFrame动态身高



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


  1. 相同的协议（http：//）

  2. 相同的子域（ http：// app 。）

  3. 相同的网域（ http://app.domain.com
    4. a>）

  4. 同一端口（ http：// app。




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




      • iFrm1，html

      • iFrm2.html

      • iFrm3.html


    • 准备布局和iframe attribu当我们要控制iframe时，tes很重要。


      • 当我们通过满足同源策略的要求来确定父页和子页的确切位置时，第一步就已经完成了。 / li>




CSS： h3> 

  / *外部容器* / 
 
 #iSec {
宽度：100vw; / *与屏幕一样宽* / 
高度：100vh; / *与屏幕一样高* / 
 display：table; / *表现得像一张表* / 
} 
 
 
 / * iFrame Wrappers * / 
 
 .jFrame {
 position：relative; / *作为一个非静态元素，可以很容易地定位任何后代。 * / 
最大高度：100％; / *在处理动态内容时，保持灵活性非常重要。 * / 
最大宽度：100％; / *见上面* / 
 overflow-y：auto; / *当高度超过视口（屏幕）时，将出现滚动条* / 
 display：table-cell; / *表现得像一个表格单元
} 
 
 / * iFrames * / 
 
 iframe {
 position：absolute; / *容易定位在它的父级（`.jFrame`）* / 
 width：100％; / *设置iFrames的属性以及* / 
 height：100％; / *设置iFrames的属性以及* / 
 
 top：0; / *链接iframes的边* / 
 left：0; 
 bottom：0; 
 right：0; 
}



iFrame：



 < iframe id =iFrm1src =iFrm1.htmlwidth =100％height =100％scrolling =noframeborder =0><<<< ; / iframe的>

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



我借用并修改的大部分代码是从
这个

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



pre $函数loadiFrames （ 'IFRAME'）;
var iFrmArray = Array.prototype.map.call（iFrmList，function（obj）{
var ID = obj.id;
iFrmHt（ID）;
}）;
}

//引用目标iFrame的文档

 函数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） ; 
返回iHt; 
}

//更改iFrame的高度 

  iFrm.style.height = iHt +'px'; 
 console.log（'iFrame：'+ iFrm.id）; 
 console.log（'height：'+ iHt（iDoc））; 
 
 $ / code>

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

  window.onload = loadiFrames;

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



SNIPPET 

 <！doctype html>< html>< head> < meta charset =utf-8> < title> iFrame动态高度< / title> <风格> #iSec {width：100vw;身高：100vh;显示：表格; } .jFrame {position：relative;最大高度：100％;最大宽度：100％;溢出-y：auto; display：table-cell; } iframe {position：absolute;宽度：100％;身高：100％; top：0;左：0;底部：0;正确：0; }< / style>< / head>< body> < section id =iSec> < div id =i1class =jFrame> < iframe id =iFrm1src =iFrm1.htmlwidth =100％height =100％scrolling =noframeborder =0>< / iframe> < / DIV> < div id =i2class =jFrame> < iframe id =iFrm2src =iFrm2.htmlwidth =100％height =100％scrolling =noframeborder =0>< / iframe> < / DIV> < div id =i3class =jFrame> < iframe id =iFrm3src =iFrm3.htmlwidth =100％height =100％scrolling =noframeborder =0>< / iframe> < / DIV> < /节> <脚本>函数loadiFrames（）{var iFrmList = document.querySelectorAll（'iframe'）; var iFrmArray = Array.prototype.map.call（iFrmList，function（obj）{var ID = obj.id; iFrmHt（ID）;}）; }函数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）;返回iHt; } iFrm.style.height = iHt +'px'; console.log（'iFrame：'+ iFrm.id）; console.log（'height：'+ iHt（iDoc））; } window.onload = loadiFrames; < / script>< / body>< / html>

I have already tried some of the tips they are answered to regarding this iframe auto height problem.

Basically, what I want is auto adjusting the iframe's height dynamically, according to the height of the contents that are inside the iframe.

Here are the specific ones that I've tried.

Resizing an iframe based on content

How to auto-size an iFrame?

iframe Auto Adjust Height as content changes

The iframe with the id #iframe needs to auto adjust is height to the content, so I inserted following codes each to the parent document, and to the iframe's body.

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

and to the 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>

This is the site that im having problem with : http://xefrontier.com

(if you click on the 'WALL' tab, the iframe is in there.)

Can anyone help me figuring out, why those codes won't work? Thanks.

解决方案

The Snippet of course is not functioning, I just put it there to fulfill the post requirements. Please read this README.md and review the Plunker demo. All the details are in the README.md and posted here as well.

README.md

iFrame Dynamic Height

This demo works under the Same Origin Policy, simply put, the parent children pages must be in the same location:

  1. Same protocol (http://)
  2. Same sub-domain (http://app.)
  3. Same domain (http://app.domain.com)

  4. Same port (http://app.domain.com:80)

    • There's 3 children pages at varying heights.

      • iFrm1,html
      • iFrm2.html
      • iFrm3.html

    • Preparing layout and iframe attributes are important when we are going to control iframes.

      • The first step is done already when we established where exactly the parent and children pages are by fulfilling the requirements of the Same Origin Policy.

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>

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

The majority of the code I borrowed and modified is from this site

// Collect all iframes into a NodeList, convert to an array, then call iFrmHt(), and pass on the ids of each iFrame.

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

// Reference the Document of the target iFrame

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;

// Determine iFrame's child page-- height with several different methods to measure.

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

// Change the height of the iFrame

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

// If you load on window load, there shouldn't be any timeouts from the 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>

这篇关于iframe自动调整其高度以适合内容高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆