Resizing iframes using easyXDM

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.

To make it easier to do this using easyXDM, I have now published an example how how to do this here.

It really is easy, on the page hosting the iframe you use the following to load the iframe

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

And then you put the following in the iframes body after the content

var transport = new easyXDM.transport.BestAvailableTransport({}, function(){
    transport.postMessage(document.body.scrollHeight);
});

Thats it!
Again, the sample can be viewed here.

Bookmark and Share

Tags: , , ,

This entry was posted on Friday, February 19th, 2010 at 18:52 and is filed under easyXDM. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

View Comments to “Resizing iframes using easyXDM”

  1. shane Says:

    Hi there. I have tried using this code from the examples provided and it doesn't not work at all.
    All i get is a frame that doesn't show all the content. Is there anywhere i can get a hold of an example of two files working with the resized iframe, without all of the domain switching code / google analytics code which is in the examples provided.

  2. okinsey Says:

    This is old code that was deprecated a long time ago :) Please follow the samples at the official site :)
    I'll follow up on email!

Leave a Reply

blog comments powered by Disqus