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
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:
Same port (http://app.domain.com:80)
There's 3 children pages at varying heights.
Preparing layout and iframe attributes are important when we are going to control iframes.
CSS:
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.
// Reference the Document of the target iFrame
// Determine iFrame's child page-- height with several different methods to measure.
// Change the height of the iFrame
// If you load on window load, there shouldn't be any timeouts from the iFrames.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
SNIPPET
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.