Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Aug 2004
    Thanked 0 Times in 0 Posts

    dynamically resize iframe

    Any javascript experts here?

    I am trying to dynamically change the height and width of an iframe depending on the content in the iframe.

    I have the following code so far:

    function calcHeight()
    	var the_height=document.getElementById('the_iframe').contentWindow.document.body.scrollHeight;//find the height of the internal page
    	var the_width=document.getElementById('the_iframe').contentWindow.document.body.scrollWidth;//find the width of the internal page
    				document.getElementById('the_iframe').style.height=the_height;//change the height of the iframe
    				document.getElementById('the_iframe').style.width=the_width;//change the width of the iframe
    //this bit is html for the iframe
    <iframe onLoad="calcHeight();" id="the_iframe" name="myframe" scrolling="no" frameborder="0" src="blank.html" height="100%" width="100%"></iframe>
    This code does work, but not perfectly.

    It works perfectly only if the height of the iframe changes based on the content in the iframe. If the content increases with height of the iframe, it works perfectly. If I then click on another link which only has a little information, the iframe reduces its size to fit around the content. Thats exactly what its supposed to do.

    On to the bit which is not working.

    If i click on a link which has content wider than the width of the screen, the iframe will resize itself to fit around the content. Thats a good thing as thats whats supposed to happen.

    However, if I then click on a link which has content less than the previous content, the iframe height will reduce to fit around the content, but the iframe width will not reduce for some reason? It will stay at the width of the previous content ???

    anyone know how to fix this problem?

    excuse my back english
    Last edited by narmi2; 08-08-2004 at 02:38 PM.

  • #2
    New to the CF scene
    Join Date
    Apr 2005
    Thanked 0 Times in 0 Posts
    I solved this bug(?) by add the following code before get the Iframe's contentWindow.document.body's scrollWidth value.
    document.getElementById('Iframe').style.width=document.body.clientWidth; //fix the scrollWidth bug;寬度可變大但不可變小
    var the_wide=document.getElementById('Iframe').contentWindow.document.body.scrollWidth;


    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts