Entrepreneurship, Internet, mustaches.

Menu

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 wont let content from another domain affect the parent container. It is far too insecure, this 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) 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.

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 for 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.

Okay, I’ve set up your solution exactly and it sounded genius. But now I just don’t see how this could work.

How can we measure the height of content using php? Can you give a working example? I’m not sure how your $x and $y are used. (I’ve searched and searched, but all that comes up says measuring height with php is impossible, b/c PHP is server-side, so it can’t calculate the height in a browser the way javascript could. It would seem the only way this might work is to use javascript to measure the height, then pass that to the php-if that’s even possible.)

I’d love to get this working. I’ve created embeddable iframe recipes that work like a charm, but can’t yet get the iframe to resize to content height.