Dynamically resize an iframe depending on it’s content

A while back I figured out a neat trick to enable you to resize an iframe embedded on someone else’s page depending on the size of it’s contents.

The problem is this.

You have a widget that you want other people to be able to embed in the pages of their website, and you want to use an iframe to do this.  However the content of the iframe widget is dynamic, and the size of it can vary, depending on the content.  You want the iframe/widget to resize itself to suit the content.

Problem. There is NO way to resize an iframe of your content embedded on someone else’s page from WITHIN the iframe content itself.  No amount of JavaScript or clever twiddling in the page served up in the iframe will allow you to do this.  By design browsers won’t let content from another domain affect the parent container.  It is far too insecure, this is referred to as same origin policy.  If you are serving up content in the iframe from the same domain as the parent page, then you can just use JavaScript to do this.

Only the parent container can resize the iframe.  So seeing as the parent container is someone else’s page that you have no control over, how do you make it aware of the content in the iframe and tell it how to resize the iframe?

Solution.  You can do this simply by serving up a dynamic style sheet with the iframe code used to embed your widget.  This style sheet (CSS) is served up by the same server as the widget content, and it knows what the dynamic content is in the iframe and can figure out how big the iframe needs to be.  This CSS file, therefore, needs to be a dynamically generated file, as it will need to do some server-side calculations to figure out what the dimensions are.

Here is an example of the widget code you would supply.

<link href=”http://your.site/path/to/css.php?content_id=1234&dom_id=iframe_widget” rel=”stylesheet” type=”text/css” />
<iframe id=”iframe_widget” src=”http://your.site/path/to/content.php?content_id=1234″ frameborder=”0″ width=”100%” scrolling=”no”></iframe>

The style sheet will need to use some server-side code to output the correct dimensions for the iframe element style.  Here is an example of dynamically generating this style.

<?php

$domId = $_GET["dom_id"];  //This is the dom element ID of the iframe to generate the style for
$content_id = $_GET["content_id"]; //This the unique identifier for the content being generated by the widget/iframe

/**

Using the $content_id, do some magic here to determine what the content is (customer details, list of products, photos etc), and calculate the height etc.  This is simple for things like a list of items where the height of the elements is fixed, but the number is variable.  If the widget is a combination of things that are dependent on font size, width of elements, white-space wrapping etc, it can get a little tricky, but in the end it is all just math.

**/

$elementHeight = $x * $y + 100;  //This is just an example.

?>

/* STYLE SHEET STARTS HERE */

#<?php echo $domId;?>
{
height: <?php echo $elementHeight;?>px;
overflow: hidden;
scroll: none;
}

That’s it.  Nice and simple-ish.  Only tricky if the content of the iframe wildly varies.