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