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.
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>
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>
Resize iframe and its parent height according to content inside iframe
Since your document and iframe are different domains, the javascript from one cannot directly access the DOM of the other (see same-origin security restrictions). That means that you cannot directly reach into the DOM of the iframe to find out how large it would like to be such that you can set the iframe size to that size from within the containing document.
Any options you have for doing this require some code control within the iframe. For example, you could support window.postMessage()
between the two iframes and the containing document could ask the iframe how large it would like to be via window.postMessage()
and when it receives the response, it could then change the iframe size.
Various references:
cross-domain iframe resizer?
http://css-tricks.com/cross-domain-iframe-resizing/
Cross-domain, cross-browser Iframe communcation, made easy!
Yet Another cross-domain iframe resize Q&A
https://github.com/davidjbradshaw/iframe-resizer
How to automatically resize iframe content size when browser window resize?
Your site is restricted from making changes to the content of an iframe. If you control the site inside the iframe, you can set up a message-system between the two sites. It might be worth checking if one exists even if you don't control the other site.
Otherwise, I would recommend simply refreshing the content of the iframe:
$( '#iframe' ).attr( 'src', function ( i, val ) { return val; });
As misorude mentioned in a comment you should contain this line so it doesn't fire immediately upon resize, since that would send an unreasonable amount of requests to the remote site.
Related Topics
Jquery CSS Visibility with Animation
How to Change Cursor from Pointer to Finger Using Jquery
How to Find Which JavaScript Is Changing an Element's Style
How to Make a Div Always Float on the Screen in Top Right Corner
Set Scrolltop and Scrollleft Without JavaScript
Changing the Default Font Family in Tinymce
Determine Maximum Possible Div Height
JavaScript - Check If String Is Valid CSS Color
Google Chrome Copy CSS Path in Developer Tools
How to Disable JavaScript/CSS Minification in ASP.NET MVC 4 Beta
Select Element by CSS Style (All with Given Style)
Getting the Height of an Option Element with JavaScript
Changing Highcharts Background Color
Spring Not Finding Resource Files (Css, Jsp...)
How to Change CSS Content with Js
How to Generate Random Pastel (Or Brighter) Color in JavaScript