[javascript] iframe高度调整(随时自适应)(iframe加载ajax的chart图)

问题

需要在页面中镶嵌一个报表网页，这个网页包含了使用动态JS生成图标，加载不能用ajax 动态请求（使用了同一套js和css，会冲突导致样式变化），于是使用了原始的iframe。

问题：iframe 加载无法确定高度。

关于 iframe动态高度调整 这个文章多之又多，但却没有一个能解决我遇到的问题。

目前网上搜到的iframe高度调整大概有这么几种：

方法1.在加载完毕后设置高度

$("iframe#js_xs").load(function (){
var height=$("#js_xs").contents().height();
$(this).height(height);
})
或者 在iframe中设置onload
οnlοad="this.height=0;var fdh=(this.Document?this.Document.
body.scrollHeight:this.contentDocument.body.offsetHeight);this.height=(fdh>700?fdh:700)"

这么做完全无法解决我们的问题！！！！
因为一开始的时候，图表并没有加载，报表也是异步生成的，可能很慢（1分钟都有可能），一开始获得的值会很小，等加载完成后，高度变高，这样滚动条还是会出现！
于是网上继续找方法，

方法2，定时检测高度

window.setInterval("reinitIframe()", 500);

定时去检查ifrema的contents高度，实时更新iframe高度,
这个方法对大多数iframe内部是动态的都适用，但我的问题还是没有解决！！！一般市面上的char.js 都是自动适应大小的，而且我无法去修改镶嵌页面的代码，这个后果就是你不断的去调整高度，他自己不断变化高度，最后就算在无限循环中忽大忽小

方法3：延迟执行

比较靠近我们的解决方案，监听dom变化，一旦改变就更新高度，缺点是图一开始会闪烁。因此对这种方案进行了改良。

最终方案：

用jquery 的 bind 功能监听节点变化，用clearTimeout 和setTimeout 组合，屏蔽1.5秒内绘图的闪烁。

<iframe id="mainframe"  src="http://127.0.0.1:8888/dashboard/102" style = "vertical-align:bottom;" width="100%" scrolling="no" frameborder="0" οnlοad="test()" runat="server" ></iframe>
------------------------
 <script type="text/javascript">
	 var max_height = 750;
	 
	 var base_height = 0;
	 var _iframe;
	 var _tag_timeout;
	 function tag(){
	 	var container =  $(_iframe.contentWindow.document.getElementsByClassName("container"));
		var height_temp = container.height();
		if(height_temp < base_height + 50)
			return false;
		if(height_temp > max_height) {
			max_height = height_temp;
			return true;
		}
		return false
	}


	 function reinitIframe(){
		_iframe.height = max_height + 20;	
    		max_height = 750;
	}
		
	 function test(){
		_iframe = document.getElementById("mainframe");
		var temp = $(_iframe.contentWindow.document.getElementsByClassName("container"));
		base_height = temp.height();
		var contain_data =  $(_iframe.contentWindow.document.getElementsByClassName("panel-body workspace_results"));
	 	contain_data.bind('DOMNodeInserted', 
			function(e) {
			if(tag()){
				if (!!_tag_timeout){
					window.clearTimeout(_tag_timeout);
				}
				_tag_timeout = window.setTimeout("reinitIframe();",1500);
			}
		});
	}
    //test();
    //window.setInterval("reinitIframe()", 500);
 </script>