JavaScript - Dynamically resizing iframe cross-domain using URL fragment

Question

I've found a technique that documents cross-domain communication with iframes , and I decided that I'd try to exploit this to accomplish the lofty goal of getting an iframe to resize automatically when the contents change.

Basically, here's my plan (I know it's a bit hacky).

• I have control over both the parent page and the child page, but they're going to be loaded on different domains (and, in fact, one will be http and the other https).

• From within the iframe, I have a function that'll run when the document loads, and then periodically thereafter, to get the document's height, and set that as the value of a URL fragment (ie, something like https://blahblah.com/#h-768 )

• In the parent window, I have a function that'll periodically check the URL of the iframe, grab the hash tag, parse out the height, and change the iframe's height accordingly.

The big catch is this: the iframe doesn't have an ID or a name associated with it, and I probably can't change that.

In reality, the iframe is initially going to be on the same domain. It'll use document.write to create the iframe-polling function in the parent window (because I actually lied earlier when I said I had control over the parent page), and then it'll navigate to the page that I'm actually interested in.

So, the real question is, how can an iframe give itself a name or an ID ?

I've been trying things like this (using jQuery):

$(document).ready(function() {
        // Try changing the name            
        $(self).attr("name", "myframe");
        $(self).attr("id", "myframe");      
});

Trouble is, it doesn't seem to be working.

Any thoughts?

CLARIFICATION

The parent page will be something like http://mysite.com , and the iframe will initially be http://mysite.com/iframe .

That initial iframe page is just a dummy page, that:

• Gives the <iframe> element on the parent page an ID
• Creates a new <script> element on the parent page that does the resize polling, and then
• Does window.location = "http://my-real-app-location.com"

The new page will update the URL fragment with the current height, making the URL of the iframe something like http://my-real-app-location.com/#h-800 (meaning that the document is 800 pixels tall).

The script that the dummy page created on the parent page needs to grab that URL fragment and change the iframe height accordingly.

Answer 1

Well, the parent page will ultimately control the URL of the iframe. The iframe cannot update anything but its URL.

That being said, I'm not sure I understand the problem. Why can't you give the iframe an ID when you create it?

Answer 2

An iframe's window/document can't set attributes on it's own container tag, since the tag is owned by the parent document. The tag in itself has nothing to do with the window and document loaded inside it.

If you need an id attribute on it, you have to set it from the parent document, and there is no way around it.

Answer 3

Well, the following is the code that I was originally looking for. This will give the <iframe> element an ID attribute, and this code runs within the scope of the iframe. Of course, it only works if the iframe is on the same domain as the parent page (which, in my case, it initially is).

var foundMyself = false;
$("iframe", parent.document).each(function() {
    if (this.contentWindow == self) {
        $(this).attr("id", "myframe");  
            foundMyself = true; 
    }
});

The following is the code that I'm using to create the appropriate script tag on the parent page (bear in mind that my application sets a fragment #h-xxxxx denoting the height of the page):

if (foundMyself) {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.text = "function resizeApp() { var app = document.getElementById(\"myframe\"); var hash = app.contentWindow.location.hash; app.style.height = hash.substring(3); } setInterval('resizeApp();', 500);";

    parent.document.body.appendChild(script);
}

window.location = "https://my-app-real-location.com"

The new problem I'm running into now is that once the iframe has navigated away, I'm not allowed to access the contentWindow property.

Answer 4

A nice cross domain solution if you looking for is here- A made a whole research post

Yet Another cross-domain iframe resize Q&A