Growing an Iframe depending on the source inside it (which is another Server)

Question

I use javascript to expand an Iframe to the size of the document it loads to remove any vertical scrollbar, like so:

function resizeIframes() {
    $('iframe').load(function()
        {
            this.style.height = (this.contentWindow.document.body.offsetHeight + 40) + 'px';
        }
    );
}

Which works well enough for my uses. But now I need to load the Iframe with a website from another server (actually another subdomain, instead of "www.mydomain.com" it's "services.mydomain.com") and according to Firebug I'm not allowed to read properties from other domains via Javascript. I'm guessing some kind of sandbox problem?!

Is there any way to circumvent this or at least get some kind of info about the size of the content? I even would be willing to check if there is a scrollbar and continually grow the iframe until it's gone, but unlike the window object an iframe object does not seem to have a .scrollbars property.

Answer 1

I am sorry if you will find this an incomplete reply (it is) I just dont have code samples with me. I'll scetch the main concept and you will have to do the details..

You have to use some tricks to do that since XSS security does not allow frames from one site to access frames from another site:

site1:page1: call iframe (site2:page1) on site two . Let's assume the iframe ID property is "myframe".

site2:page1: run javascript (in body.onload) to calculate the size of the current view (i think you should use document.scolltop etc..). Also run an iframe site1:page2 passing the needed width as in the query string.

site1:page2:read the query string and find out the requested height, update parent.parent.document.getElementById("myframe").style.height

Answer 2

If it's just another subdomain, document.domain should give you the needed access between frames.