Povert

It's Pronounced "Pah-vert." You povert.

Dynamic Resizing of Cross-Domain Iframes

If you’ve ever wanted to have an iframe resize itself based on its (cross-domain) contents, you may have run into some problems.

I had to tackle this somewhat recently. The solution is silly, but it works.

The problem is that an iframe can’t communicate with its parent if they’re on different domains. For example, let’s say I put an iframe here on povert.com. The iframe could be pointing to, say, flappingcrane.com. Povert.com can’t access any useful information about the iframe, and vise-versa.

The solution is to have the iframed content (in this case flappingcrane.com) iframe something else from the original domain. So you could set up a file on povert.com called yaygo.html. Then flappingcrane.com iframes that, with a GET query. That GET query should contain any information you want to communicate to the parent (povert.com). Since yaygo.html is on povert.com, it can refer to povert.com with parent (though, since they’re different domains, it can’t do anything useful) and to flappingcrane.com with parent.parent. Because they’re on the same domain (even with the intermediate flappingcrane.com iframe), it can do something useful — like pass values from the GET query to a function:


parent.parent.setFunProps(iframeid, width, height, tacoflavor);

setFunProps() can then take those values and do what it wants with it (resize the iframe, whatever).

Another tidbit. If you give a name attribute to an iframe, that iframe’s contents can access the name with window.name. You can’t access window.id though, unfortunately. Either are handy for identifying to the parent document what iframe is requesting a resize, though there are other crappier ways to do it (passing its own url to match against iframe src, for example).

UPDATE: As I mention in my comment below, you can see an example of this at http://povert.com/fun/iframe/.

UPDATE (Oct 28, 2009): Looks like it doesn’t work in any version of IE now. It’s possible that Microsoft saw this as a security hole and fixed it.

UPDATE (Oct 18, 2011): jajasilver pointed out that the examples didn’t set a DOCTYPE (oops — thanks!). This has been corrected and the examples work again. Wow, I hadn’t looked at this for years.

Tags: , , , ,

19 Responses to “Dynamic Resizing of Cross-Domain Iframes”

  1. Joe D'Andrea Says:

    Hmm. Do you have sample code to demonstrate this? I tried it and got this in Firebug as soon as I tried calling parent.parent.[myfunction]:

    commandLine.evaluate FAILS: [Exception… “Security Manager vetoed action” nsresult: “0x80570027 (NS_ERROR_XPC_SECURITY_MANAGER_VETO)” location: “JS frame :: chrome://firebug/content/commandLine.js :: :: line 100” data: no]

    Note: The function name _was_ visible in the debugger, but the call was ultimately nixed. If I tried it on Safari, essentially the same thing – stopped in its tracks.

  2. Joe D'Andrea Says:

    OK, chalk it up (thankfully) to pilot error. (It helps if you reference the parent domain the _exact_ same way as your iframe – sigh.)

    It appears to be working – yay! 🙂

  3. Bradley Green Says:

    Do you have a sample of the code you used to create the function?

    Thanks!

  4. Joe Says:

    Sure. I’ve thrown together a quick example of it at http://povert.com/fun/iframe/

    The iframe, which is at sandwichestime.com, is set to be 500×500. It resizes itself to 300×300.

    If it doesn’t work, be sure that you’re at povert.com, not http://www.povert.com.

  5. chandra Says:

    Your are awesome!
    you have saved my day.

  6. Koray Gencturk Says:

    Thanks for effort, can you example this problem or code shown.

  7. Daniel Buchner Says:

    As a precursor to trying an iframey route, does your method allow the parent site, say mine.html to access a child frame’s (theirs.html) details like the frame’s document height?

    Basically I would like to find the computed height of the document in the theirs.html iframe inside of my page. I am framing a couple of sites for my users like their flicker page and another. Can I effectively get the height of that iframed document so as to resize the iframe to accommodate its content?

    Fingers crossed!

  8. Joe Says:

    Sorry Daniel — If I understand you correctly, there’s no way to do exactly that.

    To be clear, the child iframe can pass information to the parent, and that’s all. The parent can’t initiate it or request information or anything.

    In other words, you need to have control of (or have the ear of the person who has control of) the iframe’s contents. They can then pass data to the parent using a child in the same domain, as described above.

  9. Martin Says:

    Hi, I cheked your code but i didn’t see where you call the function setDimensions ??????

  10. Joe Says:

    Martin — The iframed page (example.html) creates another iframe pointing to pipe.html. That’s where setDimensions() is called.

  11. Ethan Says:

    I need to set the height based on contents, so not a static height. this works… height=’ + document.height; but it seems to be calculating the height of the iframe plus something else, so I guess I need to specify that I want the height of only the iframe. Any ideas?

  12. peter Says:

    I have the same question as Ethan.

    Everything works great, I just cant figure out how to make it dynamic to the content. right now i can get it to resize to whatever i replace 300×300. but how can i make it 300 x “height of my tumblr contents”

  13. Joe Says:

    I’ve updated the example to resize based on height of the content.

  14. Naresh Gupta Says:

    I tried the sample, it works in Firefox but not resizing in IE8. Any ideas?

  15. newme Says:

    me either, doesn’t work in IE7

  16. Kain Vinosec Says:

    I’ve looked and looked and looked for an answer for this problem and this is the only solution I’ve found that works for dynamic cross-domain iframe height resizing. It is genius. Thank you so much for posting this.

  17. jajasilver Says:

    Seems that it can work in Internet Explorer too, if you specify a valid DOCTYPE.

    In your example, the pages are rendered in Quirks mode, which seems to break the dynamic resizing.

  18. Mike Says:

    Hi [author name],

    Do you have experience with generating the second iframe dynamically? I do not want to bother the site owner with adding both iframe and script so can I just have him add the script and make the iframe by the script?

    Cheers,

    Mike

  19. Joe Says:

    No Mike, you generally can’t do that. You can generate an iframe with JavaScript, but the contents of that iframe need to be created by the site owner. You really need the cooperation of the owner.

Leave a Reply

Povert is proudly powered by WordPress
Entries (RSS) and Comments (RSS).