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.

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.

«
»
  • shane

    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.

  • http://intensedebate.com/profiles/okinsey okinsey

    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!

  • Srajus84

    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”);
        alert(allIFrames[0].contentDocument.body.innerHTML);
        //var allIFrames = document.getElementById(“contentiframe”);
        //alert(allIFrames.contentDocument.body.innerHTML);
        //alert(allIFrames.contentDocument.body.innerHTML);
        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”);
        footerElement.style.display = “none”;
        footerElement.style.display = “block”;
    }

    Please do needful help.

  • http://turismo-in.it/promozione-turismo/ Promozione Turismo

    What i have understood with your post? Nothing!!!
    Please can you explain how to do it? Where put this code?