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

最新推荐文章于 2024-03-15 14:32:31 发布

最新推荐文章于 2024-03-15 14:32:31 发布 · 4.2k 阅读

文章标签：

#iframe自适应高度 #Iframe显示不完整 #iframe高度 #蕃薯耀 #蕃薯

蕃薯耀分享同时被 3 个专栏收录

205 篇文章

订阅专栏

61 篇文章

订阅专栏

html

38 篇文章

订阅专栏

本文提供了一种通过JavaScript调整Iframe高度的方法，解决了不同浏览器下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 星期三