0

I am looking for a way to determine the height of an IFRAME based on its content. The code structure is like this: When click on a button, a new modal dialogue box will be opened which contains a DIV. The IFRAME will be loaded into this DIV. So my question is how to set the IFRAME height and as well as the outer containing DIV height based on the IFRAME content?

I tried setting height for Iframe onload of it but it always default to 150px, I don't know why.

Nagaraj Krishnappa
  • 31
  • 1
  • 4

1 Answers1

0

If you can use jQuery, first use outerHeight() to get the iframe height (call this with an body onload event for example) within the iframe DOM (returns a number; call this for example iframeOuterHeight):

var iframeOuterHeight = $("body").outerHeight();

If jQuery is not an option, use (called on onload of iframe body):

var iframeOuterHeight = document.body.clientHeight;

then use:

parent.document.getElementById("MyiframeDiv").style.height = iframeOuterHeight + 'px';

where MyiframeDiv is the ID of the div wrapper around the iframe; you need to use parent since the div that wraps around the iframe is in the parent DOM.

The One and Only ChemistryBlob
  • 7,864
  • 10
  • 36
  • 69
  • Is it possible to alter the above code in plain javascript. We are not using jquery in our application – Nagaraj Krishnappa Aug 26 '14 at 04:52
  • This will set the iframe's height based on the parent page's height. If you want to set the height of the iframe based on the height of its own content, your answer will become more complicated. – James M. Lay Aug 26 '14 at 05:01