iframeを可変サイズで表示したい

iframeで他ドメインのURLを表示しています。
この上に別のボックス要素を重ねて、一緒に縦スクロールさせたいと考えています。

下記コードで一旦URLを表示させた後、scrollHeightを取得し、その後スクロールバーを非表示にして、再表示させてみました。

しかし、iframeの中が途中までしか表示されていません。
g_iframe_innerHeightに正しくheightが入っていないようです。

何かお気づきのことがありましたら、アドバイスいただけますでしょうか？
不足情報がありましたら、ご指摘ください。

参考ページ
http://sugutsukaeru.jp/support/180/

html
1<div class="area_main area_g_main" style="overflow: scroll;">
2                            
3<div class="heatmapScroll1" id="heatmapScrollG1" style="position: absolute; z-index: 3;">
4heatmap
5</div>
6<iframe></iframe>
7                            
8</div>

JavaScript
1		var frame = $('.area_g_main iframe');
2		frame.attr('id', 'g_iframe');
3		frame.attr('src', url);
4
5		g_iframe_innerHeight = frame.get(0).contentWindow.document.body.scrollHeight;
6		frame.attr('src', '');
7
8		frame.attr('scrolling', 'no');
9		frame.attr('frameborder', 'no');
10		frame.css('height', innerHeight - 50);
11		frame.attr('onLoad', 'adjust_frame_css');
12		frame.attr('src', url);
13
14

JavaScript
1function adjust_frame_css(F){
2	console.log('adjust_frame_css');
3	if(document.getElementById(F)) {
4		var myF = document.getElementById(F);
5		var myC = myF.contentWindow.document.documentElement;
6		var myH = g_iframe_innerHeight;
7		if(document.all) {
8		myH  = myC.scrollHeight;
9		} else {
10		myH = myC.offsetHeight;
11		}
12		myF.style.height = myH+"px";
13	}
14}