jQuery跨域iframe高度问题

Question

I have the following javascript that determines the content height of an iframe:

var body = document.body, html = document.documentElement;
var height = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight);

First time, this works great! Once i have the height i post it to the parent page, like so:

parent.postMessage(height, '*');

On the parent page i listen for the post message event and set the height of the iframe, like so:

$('#frame').height(data);

So far so good! Now when the iframe navigates within it self to a different page and it recalculates the content height, it keeps returning the height it calculated the first time.

I am assuming that this is because the iframe now has an explicit height. How do i ensure that i get the actual content height and not the height set on the iframe?

Answer 1

You have to compute the body height on document.ready.

I suggest you to use easyXDM to get some fallback on postMessage. easyXDM has an example exactly about getting an iframe height .

Answer 2

Thanks to Kevin B for the tip.

Replaced:

var body = document.body, html = document.documentElement;
var height = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight);

With:

document.getElementsByTagName('body')[0].offsetHeight

Works like a charm!!!