iframe的高度自适应

soncy — Mon, 18 May 2009 11:11:54 +0000

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传进去，如

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

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);

其中QueryString()函数是负责取得url中的对应字段的。
使用这种方法的时候有两个注意事项，一是子页面和父页面必须在同一个域下，二是子页面必须有DOCTYPE的声明。

七分地 » iframe自适应

iframe的高度自适应