iframe自适应高度，Iframe显示不完整

iframe自适应高度，Iframe显示不完整，兼容IE、Chrome、火狐

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

蕃薯耀 2014年8月13日 16:57:03 星期三

 

 

iframe在浏览器中不怎么好，高度问题或者说显示问题经常出现，而且在不同的浏览器表现方式各不相同，特别让人纠结。但可以通过js改变Iframe的高度。

 

js代码：

function setIframeHeight(iframeId){
	var cwin = document.getElementById(iframeId); 
	if (document.getElementById){
		if (cwin && !window.opera){
			if (cwin.contentDocument && cwin.contentDocument.body.offsetHeight){
				cwin.height = cwin.contentDocument.body.offsetHeight + 20; //FF NS 
			}
			else if(cwin.Document && cwin.Document.body.scrollHeight){
				cwin.height = cwin.Document.body.scrollHeight + 10;//IE 
			}
		}else{
			if(cwin.contentWindow.document && cwin.contentWindow.document.body.scrollHeight) 
			cwin.height = cwin.contentWindow.document.body.scrollHeight;//Opera 
		}
	} 
};

 

注意的是：

如果Iframe一开始就显示的话，可以在Iframe的onload事件直接加载方法，例：

<iframe onload="setIframeHeight(ifm1);" id="ifm1"  frameborder="0" scrolling="no" src="src" style="width: 100%;heigth: 100%;"></iframe>

 

若Iframe一开始是隐藏，如果显示后高度还有问题，就可以再次执行该方法setIframeHeight（id）。

document.getElementById("ifmDiv").style.display="block";
setIframeHeight("ifm1");

 

如果加载的Iframe页面里面加载数据使用的是Ajax请求，避免Iframe加载数据未取回来的情况，则需要等到数据取回来渲染后再设置高度，这样可以通过window.setInterval不断刷新解决这类问题，如下：

function menuPermissionIframeReset(){
    setIframeHeight("menuPermissionIframe"); 
};


function treeMenuClick(event, treeId, treeNode) {
    window.setInterval("menuPermissionIframeReset()", 200); 	 
};

 

 

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

蕃薯耀 2014年8月13日 16:57:03 星期三