iframe的高度自适应

发表于 2009年05月18日 soncy 1,717次阅读

iframe不像普通的div或者span等元素默认高度是auto，在iframe嵌套一个页面时，如果不指定iframe的高度，那么肯定是得不到想要的结果的，但是如果被嵌套的页面（以下称子页面）的内容是不固定的呢？这个时候如果再写死iframe的高度就不靠谱了，当子页面的内容变化，比如变多，子页面的高度就会增加，在嵌套页面（以下称父页面）中就只会看到一部分，如果子页面内容变少，高度变低，那么就会看到一大片空白，很不爽。

这个时候就有必要考虑iframe的高度自适应了，原理很简单，就是得到子页面的高度，再把高度赋给iframe。首先在父页面定义一个函数，用于指定iframe的高度设置。

function setIfrmHeight(_iframid,_height,_visibility){
	if(_visibility){
		$(_iframid).style.display = _visibility;
	}
	$(_iframid).style.height = _height + "px";
}

这个函数接收三个参数，分别为iframe的id，要设置的高度和是否显示。
接下来在子页面调用这个函数就可以了，在子页面需要取得页面高度和当页面被哪个iframe调用，页面高度可以用document.body.offsetHeight得到，iframe的id可以通过iframe的src传进去，如

0	<iframe id="piframe" src="aa.html?frmid=piframe" height="0" width="100%" scrolling="no" frameborder="0"></iframe>

在子页面中，就可以这样调用了

function QueryString(val)  
{
	var uri = window.location.search;
	var re = new RegExp("" +val+ "=([^&?]*)", "ig");
	return ((uri.match(re))?(uri.match(re)[0].substr(val.length+1)):null);
}
var _bodyHeight = document.body.offsetHeight;
var _iframeId = QueryString("frmid");
var _visibility = "block";
if(_bodyHeight < 10){
	_visibility = "none";
}
window.parent.setIfrmHeight(_iframeId,_bodyHeight,_visibility);