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

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

蕃薯耀

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

阅读量1k

点赞数

分类专栏： js html 蕃薯耀分享文章标签： iframe自适应高度 Iframe显示不完整 iframe高度蕃薯耀蕃薯

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

409 篇文章 1 订阅

订阅专栏

92 篇文章 0 订阅

订阅专栏

html

41 篇文章 0 订阅

订阅专栏

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 οnlοad="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 星期三