www.webdeveloper.com
Results 1 to 10 of 10

Thread: iframe auto height resizer based on its content?

Hybrid View

  1. #1
    Join Date
    Jun 2010
    Posts
    53

    iframe auto height resizer based on its content?

    I'm looking for a good cross-domain iframe resizing script that adjusts its height based on its content. I have access to the html/css for the source of the iframe as well. Is there any out there?

  2. #2
    Join Date
    Mar 2007
    Location
    Canada
    Posts
    99
    I can't think of a way for the Iframe to resize itself but maybe you can take a look at one of twitter's widgets. It fits the container nicely.
    Maybe they use JS to check the container's width and then pass correct width and height for the IFRAME

  3. #3
    Join Date
    Nov 2010
    Posts
    86

    Resizing an iframe based on contents

    You can get "scrollHeight" of the iframe's document's body. This represents the height of the contents of the iframe.

    e.g.:
    Code:
    var content_height = frames["framename"].document.body.scrollHeight;
    You can then set the height of the iframe element.

    I made a basic working example you can test here:
    http://webinterfacetricks.com/iframe_height/

    It's been tested in ie7, 8, 9, and the latest firefox, opera, safari and chrome. I can't promise anything about other browsers.

    If you want the resizing to happen automatically you can put it in the onload event of the iframe. I've just put it in an onclick event to illustrate the change.

    I hope this helps and let me know if you have any questions.

  4. #4
    Join Date
    Dec 2002
    Location
    St. Louis, MO, USA
    Posts
    1,582
    Code:
    	function sizeToMyContent( ifRef, setW, setH, fMargin ) { //alert(ifRef);
    		var ifDoc, margin = typeof fMargin === 'number' ? fMargin : 6; 
    		try { 
    			ifDoc = document.getElementById(ifRef).contentWindow.document.documentElement;
    			}
    		catch( e ) { 
    			ifDoc = null;
    			}		
    		if( ifDoc ) {    
    			if( setH ) {
    				document.getElementById(ifRef).height = ifDoc.scrollHeight + margin + "px"; 
    				}
    			if( setW ) {
    				document.getElementById(ifRef).width = ifDoc.scrollWidth + margin + "px";
    				}
    			}  
    		}
    HTML Code:
    <iframe name="thisFrame" src="document.html" onload="sizeToMyContent(this.id, false, true);">
    
    </iframe>
    This will adjust only height to content; change the false to true if you want it to adjust height and width according to content.

  5. #5
    Join Date
    Mar 2007
    Location
    Canada
    Posts
    99
    WolfShade, interfacetricks nice!
    Thanks for sharing.

    It works great when your IFRAME has an ID

  6. #6
    Join Date
    Dec 2002
    Location
    St. Louis, MO, USA
    Posts
    1,582
    Och! Forgot to put that in there.. sorry! Glad it's working for you.

  7. #7
    Join Date
    Apr 2011
    Posts
    2
    sorry if silly question, I have a problem about the iframe code, if within the iframe external (external website) there is a link, can the iframe size change if I click the link to it, can by using the code that you share? What kind of code should I use, please give me help

  8. #8
    Join Date
    Nov 2010
    Posts
    86

    Automatically resizing an iframe when it loads

    You can use the onload event of the iframe to set its size, so that when the new document loads, the resize-to-fit-contents function is called.

    Unfortunately you have to do this in two ways, one for older version of internet explorer. But it's not much trouble, you just test if the iframe has a readyState property, and if it does, you can do it the ie-specific way.

    I've ammended my example to set an onload event that fires in all major browsers, and demonstrates doing so both when you load a new page in code, and when you click on a link within the iframe.

    http://webinterfacetricks.com/iframe_height/

    The source code is fairly short and full of comments to explain how each step works.

    Hope this helps.

  9. #9
    Join Date
    Nov 2010
    Posts
    86
    Important note:

    From further testing, it seems "document.documentElement.scrollHeight" is more reliable in more situations than "document.body.scrollHeight", and so should be used instead.

    The latter doesn't always give the desired value if the frame is already bigger than the document it contains. So in some browsers it won't cause the iframe to shrink to fit a smaller document (only grow to fit a bigger one).

    To use document.documentElement.scrollHeight instead, make sure all of your pages tell the browser to use standards mode, by putting a doctype (e.g. <!doctype html> ) as the first line of your html code.

    I've updated my example page to reflect this change of method.

  10. #10
    Join Date
    Mar 2013
    Posts
    2
    Hey interfacetricks, your solution seems to be exactly what I need but I am totally unable to get the height to automatically stretch in height.....I have one page that contains all the code:

    <html>
    <head>
    <script>

    // Resize an iframe so it's as tall as its contents. This could be much shorter but is expanded for clarity.
    function size_frame(frame_name, frame_id)
    {
    // Get the iframe element
    var frame_element = document.getElementById(frame_id);

    // Get the iframe frame-window object. Note this has different properties to frame_element.
    var frame_window = frames[frame_name];

    // Set the height to 1px first, because some browsers will give you the maximum height of either the
    // frame or its contents, when you try to read the scrollHeight property as we do below.
    frame_element.style.height = "1px";

    // set the height of the iframe element to the "scrollHeight" of the document element of the frame window.
    frame_element.style.height = frame_window.document.documentElement.scrollHeight +"px";
    }

    // Assign an onload event to an iframe so that it automatically sizes itself to the height
    // of its contents. Then change the source of the iframe to makes this event occur.
    function do_auto_resize()
    {
    // Get a reference to the frame element.
    var frame = document.getElementById("frame_id1");

    // Create the onload event.
    var load_function = function(){size_frame("frame_name1", "frame_id1");}

    // If necessary, assign it the internet-explorer way
    if (frame.readyState) frame.onreadystatechange =
    function() {if (frame.readyState=="complete") load_function();}

    // Otherwise assign it the normal way.
    else frame.onload = load_function;

    // Change the source of the iframe so it reloads
    frame.src = "http://intranet-dev/systemInfoBanner.cfm";
    }

    </script>
    </head>
    <body>
    <img src="" width="300px" height="500px"></img>
    <iframe src="http://intranet-dev/systemInfoBanner.cfm" name="frame_id" id="frame_id" onload="size_frame(this.id, true, ture;"></iframe>


    </body>
    </html>


    Quote Originally Posted by interfacetricks View Post
    You can use the onload event of the iframe to set its size, so that when the new document loads, the resize-to-fit-contents function is called.

    Unfortunately you have to do this in two ways, one for older version of internet explorer. But it's not much trouble, you just test if the iframe has a readyState property, and if it does, you can do it the ie-specific way.

    I've ammended my example to set an onload event that fires in all major browsers, and demonstrates doing so both when you load a new page in code, and when you click on a link within the iframe.

    http://webinterfacetricks.com/iframe_height/

    The source code is fairly short and full of comments to explain how each step works.

    Hope this helps.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles