Lions Den

The Code and Times of Hanan Schwartzberg

About Hanan | Hanan's CV | Contact Hanan

February 12, 2014

Resize an iFrame to match its contents

Filed under: JavaScript — Tags: , , , — Hanan Schwartzberg @ 9:52 am

The Issue

You need to load content into an iFrame, but you don’t know the height of the content ahead of time.

The Solution

Catch the lonload event of the iFrame and resize it to the height of the body of the content

<iframe id="ifArtworkDetails" width="650px" height="420px" scrolling="no" 
        src="someDynamicContent.html" marginheight="0" marginwidth="0" 
        frameborder="0" onload="resizeIframe(this)"></iframe>
    function resizeIframe(objIframe) {
        objIframe.style.height = 
            objIframe.contentWindow.document.body.scrollHeight + 50 + 'px';
    }

No Comments »

No comments yet.

RSS feed for comments on this post. TrackBack URL

Leave a comment

Anti-Spam by WP-SpamShield

Home | Site Design | Banner Design | Code Den | Offsite Posts | Downloads | Photography | About Hanan | Hanan's CV | Contact Hanan
Copyright © 2009 Hanan Schwartzberg. All rights reserved.