Resize iframe based on content

One thing that many are using easyXDM (and other cross-domain hacks) for, is to dynamically change the size of embedded iframes based on the contents size, so as to avoid the scrollbars.

With easyXDM this is really easy:

Instead of embedding the iframe using plain HTML like ..

<iframe src="http://......."></iframe>

.. you do it using easyXDM ..

<br /><!-- use css to style this and its contained iframe --><br /><div id="container">/div><br />

new easyXDM.Socket({
    remote: "http://provider.easyxdm.net/example/resized_iframe.html",
    container: document.getElementById("container"),
    onMessage: function(message, origin){
        this.container.getElementsByTagName("iframe")[0].style.height = message + "px";
    }
});

.. and then in the document to embed, after the content, you put

var socket = new easyXDM.Socket({
    onReady:  function(){
        socket.postMessage(document.body.scrollHeight)
   }
});

You can see at demo of this in action here.

If you plan on navigating the inner window, be aware that this will break the connection and subsequent pages won’t cause the iframe to resize. Therefor the example uses an intermediary frame to facilitate this.