23

Is there a way to detect the height and width of an iframe, by executing a script from inside the iframe? I need to dynamically position some elements in the iframe according to the different height/width of the iframe.

Would there be any difference if there are multiple iframes in the same page? i.e. each iframe wants to find its own dimensions.

Javascript or jquery solutions welcomed.

Thanks!

<iframe src='http://example.com' width='640' height='480' scrolling='no' frameborder='0' longdesc='http://example.com'></iframe>

The iframes have to be embeded on other sites, and as mentioned by one of the answers below, I've hit permission problems.

VKen
  • 4,964
  • 4
  • 31
  • 43

5 Answers5

9

If your iframe’s page and its parent page are served from different domains (meaning you can’t access the parent page’s DOM properties from the iframe page), then I think it’s the same as when you’re trying to work out the viewport height.

For that, see:

Or possibly this:

Community
  • 1
  • 1
Paul D. Waite
  • 96,640
  • 56
  • 199
  • 270
5

Be aware that code like this:

var thisIframesHeight = window.parent.$("iframe.itsID").height();

will only be safe if the source of the iframe and parent window are from the same domain. If not you will get permission denied problems and you will have to take another approach.

Julian Jelfs
  • 473
  • 6
  • 8
  • Yes, I'm hitting permission problems as the iframes are embeded in other sites. Is there any other way? – VKen Feb 24 '11 at 04:07
  • @VKen: This is long past overdue, but yes there is `window.postMessage` that can be used to communicate between inner and outer script scope in cases when they have different origins. – Robert Koritnik Aug 23 '16 at 09:49
  • 1
    @RobertKoritnik: Thanks! I learned something new today after all these years! http://caniuse.com/#feat=x-doc-messaging and https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage – VKen Aug 23 '16 at 21:39
4

may be a bit late, as all the other answers are older :-) but... here´s my solution. Tested in actual FF, Chrome and Safari 5.0.

css:

iframe {border:0; overflow:hidden;}

javascript:

$(document).ready(function(){
    $("iframe").load( function () {
        var c = (this.contentWindow || this.contentDocument);
        if (c.document) d = c.document;
        $(this).css({
            height: $(d).outerHeight(),
            width: $(d).outerWidth()
        });
    });
});

Hope this will help anybody.

ddlab
  • 918
  • 13
  • 28
3

Each <iframe> would need an id I suppose. And then inside the <iframe> you would reference it like this:

var thisIframesHeight = window.parent.$("iframe#itsID").height();
Soviut
  • 88,194
  • 49
  • 192
  • 260
Anriëtte Myburgh
  • 13,347
  • 11
  • 51
  • 72
  • Hi, I think this answer is good. Do you also know of any other ways which does not need ID-ing? – VKen Feb 23 '11 at 07:24
  • No I don't think so, not if you're working from INSIDE the ` – Anriëtte Myburgh Feb 23 '11 at 07:38
0

yes, you can execute parent's window function from inside the frame, and pass parameters, like this: 

window.parent.FUNC_NAME(iframe_height,iframe_width)

just remember to define function FUNC_NAME in the parent window

Valentin Kantor
  • 1,799
  • 1
  • 23
  • 27