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 = '.html?height='+height+'&cacheb='+Math.random();

  }
</script>

This is the site that im having problem with :

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

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./helper.html?height='+height+'&cacheb='+Math.random();

  }
</script>

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

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

Share Improve this question edited May 23, 2017 at 10:29 CommunityBot 11 silver badge asked Mar 1, 2016 at 3:31 Mark Kang 791 gold badge2 silver badges10 bronze badges

Set your iframe height to 100% it's only 200px right now – zer00ne Commented Mar 1, 2016 at 3:38
@zer00ne ah. yes, i adjusted the height to 100% but still no luck. i will retry some of the other tips as well, see if i missed something. – Mark Kang Commented Mar 1, 2016 at 3:44
that's just one of few things needing to be changed. Do you know the CSS for #tab-2? The div containing the iframe is important. – zer00ne Commented Mar 1, 2016 at 3:54
@zer00ne i don't think there is set css properties for #tabs-2. but i can try giving height:100% to it. but even then, the height of the iframe won't really change. – Mark Kang Commented Mar 1, 2016 at 4:00
Ok, take a look at my answer, good luck, sir. – zer00ne Commented Mar 2, 2016 at 6:35

Add a ment |

2 Answers 2

Sorted by: Reset to default 1

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:

Same protocol (http://)
Same sub-domain (http://app.)
Same domain (http://app.domain.)
Same port (http://app.domain.: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>

Another user posted this question and solution on StackOverflow a number of years ago.

Full-screen iframe with a height of 100%

This approach uses CSS instead of JS to set the dimensions of the IFRAME.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - iframe auto adjusting its height to fit to the content height - Stack Overflow

2 Answers 2

README.md

iFrame Dynamic Height

CSS:

iFrame:

与本文相关的文章

评论列表(0)