iFrame auto-resize with jQuery

Inline frames are not the prettiest of HTML elements, but they can make your life a hell of a lot easier, especially with branching web application control panels, full of modals and cross-referenced entities. It’s easy to design/develop such interface if you know the height of the iFrame element, which is almost never the case. So here’s the handy solution based on jQuery and with a little help of server-side scripting. Obviously, you’d need to include jQuery in both files.

Parent page

<iframe 
    id="iframe-123" 
    src="iframe.php?iframe_id=iframe-123" 
    scrolling="no" 
    frameborder="0">
</iframe>

<script type="text/javascript">
    function updateIframeSize(x,y){
        if (x != '') {
            $('#' + x).height(y + 'px');
        }
    }
</script>

Inline frame page

<?php $iframe_id = isset($_GET['iframe_id']) ? $_GET['iframe_id'] : ''; ?>
<body>...</body>
<script type="text/javascript">
    function updateParent() { 
        parent.updateIframeSize('<?= $iframe_id ?>',$('html').height());
    }
    $(document)
        .ready(updateParent)
        .click(updateParent);
</script>

For faster performance use the old school “dirty” method:

<?php $iframe_id = isset($_GET['iframe_id']) ? $_GET['iframe_id'] : ''; ?>
<body
    onload="updateParent()"
    onclick="updateParent()">
    ...
</body>
<script type="text/javascript">
    function updateParent() { 
        parent.updateIframeSize('<?= $iframe_id ?>',$('html').height());
    }
</script>

You might want to give the iFrame reasonably small initial height in CSS, so the parent page doesn’t excessively flick and jump back and forth while the iFrame content is loading.

To make it completely client-side, read the value from iframe_id with window.location.search property.

Marko Dugonjić is a designer specialized in user experience design, web typography and web standards. He runs a nanoscale user interface studio Creative Nights and organizes FFWD.PRO, a micro-conference and workshops for web professionals.

Interested in more content like this?