How to get height of iframe from its source

Question

<iframe id="frame1" name="frame1" width="200" height="600" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://localhost/Widget/"></iframe>

I want to find the height of this iframe from the page http://localhost/Widget/ using JavaScript.

Is there any way to do so? Thanks in advance.

possible duplicate of [Adjust width height of iframe to fit with content in it](http://stackoverflow.com/questions/819416/adjust-width-height-of-iframe-to-fit-with-content-in-it) — T.Todua, Oct 01 '14 at 09:41

score 2 · Answer 1 · answered Dec 18 '12 at 11:41

I go a different way about the problem in my own solution: Within the iframe I have:

<body onload="parent.setsize(document.body.scrollHeight);">

In the parent I have a js function:

function setsize(pixels){ 
if(navigator.appName=="Microsoft Internet Explorer") pixels+=40;
if (navigator.userAgent.indexOf("Firefox")!=-1) pixels+=40;
document.getElementById('produktet').style.height=pixels+"px";

As you can see the total height of the iframe content is: document.body.scrollHeight

score 1 · Answer 2 · answered Dec 18 '12 at 11:02

You'll have to get the "parent" first to do so. You can get the parent by document.parent, so the following should work (not tested):

parent.getElementById( 'frame1' ).getAttribute( 'height' );

If you've loaded jQuery in the parent, you might use that:

parent.jQuery('#frame1').attr('height');

EDIT: Do note however, that there is a security restriction in play here: both pages have to be on the same domain for this to work.

score 1 · Answer 3 · answered Nov 27 '14 at 17:18

To bypass cross origin issues. You can read the height before the body loads:

<html>
  <head>
    <script>
        var iframeSize = Math.max( document.documentElement.clientHeight,
                                   document.documentElement.scrollHeight,
                                   document.documentElement.offsetHeight );
    </script> 
  </head>
<body>
  ...

score 0 · Answer 4 · answered Dec 18 '12 at 11:00

0

$('#frame1').attr('height');

using jQuery. Or

document.getElementbyId('frame1').getAttribute('height');

with plain js.

answered Dec 18 '12 at 11:00

How to get height of iframe from its source

4 Answers4