iFrame height resizing, responsive design techniques.

My current project required me to work with responsive design.  One task was to setup an iframe that was capable of dynamic height based on the contents of the iframe.  We did have a little control of the parent and the child content, and I thought this would be a pretty easy.

After some trial and error and a lot of google-fu I found a solution using easyXDM.  It seemed to work pretty well and was able to work across different browsers.  However, the solution was pretty heavy, weighing in at just over 21kb embedded on the parent site.

A coworker of mine brought up a more streamline solution that pulled out all the goodness of what easyXDM was doing and put it into a script at around 2kb.

The script uses postMessage transport for more current browsers.  Then falls back to a hash tag solution for browsers that don’t support postMessage option.

I cleaned it up and put it out on github.  Check it out and let me know what you think.

Demo: http://zerg.ws/iframe/demo.html

Github: https://github.com/johnymonster/iframe_height


4 thoughts on “iFrame height resizing, responsive design techniques.”

Leave a Reply

Your email address will not be published. Required fields are marked *