make iframe height dynamic based on content inside- JQUERY/Javascript
You can retrieve the height of the IFRAME's content by using:contentWindow.document.body.scrollHeight
After the IFRAME is loaded, you can then change the height by doing the following:
<script type="text/javascript"> function iframeLoaded() { var iFrameID = document.getElementById('idIframe'); if(iFrameID) { // here you can make the height, I delete it first, then I make it again iFrameID.height = ""; iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight + "px"; } }</script> Then, on the IFRAME tag, you hook up the handler like this:
<iframe id="idIframe" onload="iframeLoaded()" ...I had a situation a while ago where I additionally needed to call iframeLoaded from the IFRAME itself after a form-submission occurred within. You can accomplish that by doing the following within the IFRAME's content scripts:
parent.iframeLoaded();
A slightly improved answer to Aristos...
<script type="text/javascript"> function resizeIframe(iframe) { iframe.height = iframe.contentWindow.document.body.scrollHeight + "px"; }</script> Then declare in your iframe as follows:
<iframe onload="resizeIframe(this)" ...There are two minor improvements:
- You don't need to get the element via document.getElementById - as you already have it in the onload callback.
- There's no need to set the
iframe.height = ""if you're going to reassign it in the very next statement. Doing so actually incurs an overhead as you're dealing with a DOM element.
Edit:If the content in the frame is always changing then call:
parent.resizeIframe(this.frameElement); from within the iframe after the update. Works for same origin.
Or to auto detect:
// on resize this.container = this.frameElement.contentWindow.document.body; this.watch = () => { cancelAnimationFrame(this.watcher); if (this.lastScrollHeight !== container.scrollHeight) { parent.resizeIframeToContentSize(this.frameElement); } this.lastScrollHeight = container.scrollHeight; this.watcher = requestAnimationFrame(this.watch); }; this.watcher = window.requestAnimationFrame(this.watch);
I found that the accepted answer didn't suffice, since X-FRAME-OPTIONS: Allow-From isn't supported in safari or chrome. Went with a different approach instead, found in a presentation given by Ben Vinegar from Disqus. The idea is to add an event listener to the parent window, and then inside the iframe, use window.postMessage to send an event to the parent telling it to do something (resize the iframe).
So in the parent document, add an event listener:
window.addEventListener('message', function(e) { var $iframe = jQuery("#myIframe"); var eventName = e.data[0]; var data = e.data[1]; switch(eventName) { case 'setHeight': $iframe.height(data); break; }}, false);And inside the iframe, write a function to post the message:
function resize() { var height = document.getElementsByTagName("html")[0].scrollHeight; window.parent.postMessage(["setHeight", height], "*"); }Finally, inside the iframe, add an onLoad to the body tag to fire the resize function:
<body onLoad="resize();">