CODEWITHSUNDEEP
javascripthtmliframe
Mohan Kumar
Mohan Kumar

Reputation: 334

How to get height of iframe from its source

<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.

Upvotes: 1

Views: 10067

Answers (4)

fmsf
fmsf

Reputation: 37137

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>
  ...

Upvotes: 1

Morten Repsdorph Husfeldt
Morten Repsdorph Husfeldt

Reputation: 1003

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

Upvotes: 2

Berry Langerak
Berry Langerak

Reputation: 18859

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.

Upvotes: 1

user1703809
user1703809

Reputation: 

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

using jQuery. Or

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

with plain js.

Upvotes: 0

Related Questions