Possible Duplicate:
Resizing an iframe based on content
I'm trying to load one of my pages into an iframe. I'm never sure how big the page will be, the data on the page is loaded dynamically. I'd like the iframe to always fit the page, no matter how big or small it is. Here's what I have:
function loadModal() {
myframe = $('<iframe id="mymodal" src="MyPage.aspx" width="700"></iframe>');
myframe.appendTo($('html'));
var height = document.getElementById('modalPreview').contentWindow
.document.body.scrollHeight;
$("#mymodal").attr("height", height);
}
I've been trying to get the height of the page after it's loaded. The problem is that height
comes back as 0
. But if I do this:
setTimeout(function () {
$("#mymodal").attr("height", height);
}, 2000);
the correct height is loaded. I assume it's because the data needs a few seconds to load. But this looks funky if the page loads really fast, or it will still give me a height of 0 if it takes more than 2 seconds to load the page.
So is there a way to:
MyPage.aspx
?To size the <iframe> , we ignore the width="560" height="315" element properties, and instead use the CSS properties width:100%;height:100%; . That's it: a full-width <iframe> with fixed aspect ratio.
<iframe src="http://fullformlocationURL" width="100%" class="myIframe"></iframe> <script type="text/javascript" language="javascript"> $('. myIframe'). css('height', $(window). height()+'px'); </script>
If you're going to use option #2 you can access the parent window using the DOM and set the iframe height from the child.
$(document).ready(function() {
var iframeWin = parent.document.getElementById("yourIframeID");
iframeWin.height = document.body.scrollHeight;
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With