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.

6 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”);
        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.

  3. Тонировка машины – это очень доступный и быстрый вид автотюнинга, который способен сделать из вашего обычного, скучного автомобиля актуальный, индивидуальный, очаровательный авто, в каковом будет комфортно и уютно.

    При тонировании авто мы применяем качественные, высокотехнологичные материалы, занимающие лидирующие позиции на рынке. Мы используем первоклассные тонировочные пленки Sun Control, ARMOLAN, ASWF (American Standard Window Film), Jhonson infiniti AMS, могущие обеспечить высококачественное выполнение работ и приятную видимость из салона автомобиля. Тонировка автомашины делается обученными экспертами с большим опытом работы, способными очень быстро и качественно затонировать стекла автомобиля без их демонтажа. Ваше время дорого для нас, по этой причине на весь процесс тонирования одного авто мы тратим от 40 минут до 2 часов. Тонируем машины любого класса и сложности.

    тонировка в спб

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>