Source page doesn't resize with iframe height changes

Question

I'm using a simple JavaScript code to resize an iframe based on the content being loaded (it's all in domain). However i'm getting the situation where; when the iframe resizes for a page with a lot of content that requires scrolling on the source page but then when you go to a page with much less content, the source page remains at the same height so has a lot of horrible empty scrollable space below the content and i can't seem to stop this happening.

Is there additional code to make sure the source page resizes with the iframe?

JavaScript

 function resizeIframe(obj) {
    obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
    obj.style.width = obj.contentWindow.document.body.scrollWidth + 'px';
 }

Answer 1

You have a couple of options.

1. Use offsetHeight instead of scrollHeight.
2. Reduce the height down to 1px at the start of you resize function, so it can 'grow' to the new smaller size.

Both options have downsides. Option one won't include any margin on your body, so best to set it to 8px and then add 16px to the height. Option two creates a little flicker.