iframe dynamic height width change based on inner content

Question

Hi,

I have iframe with content like below,

    <iframe  frameborder="no" src="http:localhost/com" id="iframe">
     <div style="height:850px;width:700px;">div text </div>
   </iframe>

This shows the iframe with hori. and vertical scroll but not the height on inner content of 850px.

how can i change the iframe height dynamiclly based on inner content height n width. Im using jquery inside the content.

Its cross domain js widget so most of the below answers throwing permission denied error

Thanxs, Nithish

Answer 1

Nithish,

if you are using jquery, then you can easily find (and set) the height of any div (in your domain - not on external content) as such:

// get the height - in case we want to factor it into the equation below!!
var myDivHeight = $('iframe').css('height');

// set the height
var docHeight = $(document).css('height');
$('iframe').css('height', docHeight);

hope this helps ...

Answer 2

If domains are the same for both pages:

parent.document.getElementById("iframe").style.height = $(document).height()+"px";

You can use jQuery in parent page too (if its available there).

Answer 3

You should create a function to measure the height of the content, and set the IFrame height and then call the resize function when the content is loaded.

<SCRIPT LANGUAGE="JavaScript">
function resizeIframeToFitContent(iframe) {
    // This function resizes an IFrame object
    // to fit its content.
    // The IFrame tag must have a unique ID attribute.
    iframe.height = document.frames[iframe.id]
                    .document.body.scrollHeight;
}
</SCRIPT>