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: "",
    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(){

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

5 thoughts on “Resizing iframes using easyXDM

  1. 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. Hi Kinsey,
    I have few doubts in iframe. I have one jsp file which includes iframe.
    For example,
    In index1.jsp, i used like this

    Note: I have use IFrameHandler.js,IFrameCaller.js in my application. I called these js in index1.jsp.

    I want to call this index1.jsp in different application. So i used like this

    In index2.jsp

    But my problem is, i am not able to get  full page of main.html. I cannot able to resize the frame.

    I dont know the problem. This is the function which i used for  resizeIframe present in  (IFrameHandler.js)

    function resizeIframe(calledByElement) {

        var allIFrames = document.getElementsByTagName(“iframe”);
        //var allIFrames = document.getElementById(“contentiframe”);
        for(var i = 0; i 0) {
                IFrameElement.height = sourceHeight;       
        // hack for IE6 to re-render the footer. (otherwise it’ll be placed wrong after resizing iframe)
        var footerElement = document.getElementById(“footer”); = “none”; = “block”;

    Please do needful help.

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>