Mauro Bilotti Mauro Bilotti - 1 year ago 138
CSS Question

javascript: unable to get proper height from internal page used within an iframe

I know that there are a lot of topics about this, but none that solves my problem. I read a lot about this and I couldn't, so perhaps some of you might help me :)

I'm working in a web project which needs to display another web into an iframe.

I read about POSTMESSAGE javascript method in order to tell the page container (the one that has the

tag) the height of the page used within the iframe.

The problem is pretty simple. When I load the "internal page" on a new tab (the one that will be loaded in the iframe) and I try to get the height of the document then I get "380" as value, which I think is the correct one being that was not loaded in the iframe.

window.onload() event on internal page

On the other hand, when I try to render the iframe from the "container page" (the one which has the iframe tag) and I inspect what happens in the same script (that runs in "internal page") and I always get the value of 150px.
See the following image:

enter image description here

I don't really know where this value come from, but I couldn't figure out how to get the correct one at the moment you place it in an iframe.

What am I doing wrong? Any ideas?
Thanks in advance!

I forgot to mention that I used this approach base on the following URL:

Answer Source

The link in your post, explaining the mechanism of the postMessage event, almost has it right. Its example code works in Firefox and IE, but not in Chrome. But really all you need to do is replace document.body.scrollHeight in the iframe source with document.documentElement.offsetHeight and then it is cross-browser compatible.

So, as an example, the iframe can say

<!DOCTYPE html>
  <meta charset="UTF-8">
  <title>the frame</title>
   window.onload = function() {
    // post our message to the parent
     // get height of the content
     // set target domain
  <p>See the frame. It is the correct height.</p>

and the parent page

// browser compatibility: get method for event 
// addEventListener(FF, Webkit, Opera, IE9+) and attachEvent(IE5-8)
var myEventMethod =
  window.addEventListener ? "addEventListener" : "attachEvent";
// create event listener
var myEventListener = window[myEventMethod];
// browser compatibility: attach event uses onmessage
var myEventMessage =
  myEventMethod == "attachEvent" ? "onmessage" : "message";
// register callback function on incoming message
myEventListener(myEventMessage, function(e) {
  // we will get a string (better browser support) and validate
  // if it is an int - set the height of the iframe #my-iframe-id
  if ( === parseInt(
    document.getElementById('my-iframe-id').height = + "px";
}, false);
iframe {
  border: 2px inset #FF8000;
  width: 100%
<iframe id="my-iframe-id" src="">

and this will work in all the modern browsers.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download