Adjust width and height of iframe to fit with content in it
<script type="application/javascript">
function resizeIFrameToFitContent( iFrame ) {
iFrame.width = iFrame.contentWindow.document.body.scrollWidth;
iFrame.height = iFrame.contentWindow.document.body.scrollHeight;
}
window.addEventListener('DOMContentLoaded', function(e) {
var iFrame = document.getElementById( 'iFrame1' );
resizeIFrameToFitContent( iFrame );
// or, to resize all iframes:
var iframes = document.querySelectorAll("iframe");
for( var i = 0; i < iframes.length; i++) {
resizeIFrameToFitContent( iframes[i] );
}
} );
</script>
<iframe src="usagelogs/default.aspx" id="iFrame1"></iframe>
Make iframe automatically adjust height according to the contents without using scrollbar?
Add this to your <head>
section:
<script>
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.documentElement.scrollHeight + 'px';
}
</script>
And change your iframe to this:
<iframe src="..." frameborder="0" scrolling="no" onload="resizeIframe(this)" />
As found on sitepoint discussion.
CSS3: Adjust height of iframe to fit its content
That is not possible with CSS. And there is more, iframes will work different way in different browsers. If you see it on Safari from al iPad, you will see the iframe as you want, the 100% height. There is a bug right there that people solve enclosing it in a container and setting overflow-y: scroll;
but not in other browsers.
What you can do is get the body's height by javascript and set the same height for the iframe.
Here is a piece of code that will work, I am using jQuery here but you can do it without jQuery:
$('#iframe-id').height( $('#iframe-id').contents().find('body').height() );
Assuming that your body's height is the full height of your iframe
, if you used floating elements and you didn't clear the iframe you will have problems.
You can also use html
tag:
$('#iframe-id').height( $('#iframe-id').contents().find('html').height() );
iframe auto adjusting its height to fit to the content height
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)
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>
Related Topics
How to Refresh Page on Back Button Click
Frame Buster Buster ... Buster Code Needed
Onclick to Get the Id of the Clicked Button
Contenteditable, Set Caret At the End of the Text (Cross-Browser)
Html Script Tag: Type or Language (Or Omit Both)
How to Get the Pure Text Without HTML Element Using JavaScript
Html5 File API Read as Text and Binary
Capture Key Press (Or Keydown) Event on Div Element
Encryption in JavaScript and Decryption With PHP
Stop Form Refreshing Page on Submit
How to Launch HTML Using Chrome At "--Allow-File-Access-From-Files" Mode
Submit Two Forms With One Button
How to Get the Raw Value an ≪Input Type="Number"≫ Field
Resize Html5 Canvas to Fit Window
How to Get Selected Text from a Textbox Control With JavaScript