1.首先给出一个iframe
<iframe id="ifrm" marginheight="0" marginwidth="0" height="100" width="1000"
frameborder="0" scrolling="no" src="xxxxx.html">
</iframe>
2、然后看看怎么获取Iframe中的页面的高度。
其实最麻烦的就是怎么让获取的高度准确,不同的方式不同的浏览器中获取到的值都会不一样!
function getDocHeight(doc) {
//在IE中是document.body.scrollHeight
//在Firefox中是document.height
var docHei = 0;
var scrollHei; //scrollHeight
var offsetHei; //offsetHeight,包含了边框的高度
if (document.height) {
//Firefox支持此属性,IE不支持
docHei = document.height;
} else
if (document.body) {
//在IE中,只有body.scrollHeight是与当前页面的高度一致的,
//其他的跳转几次后就会变的混乱,不知道是依照什么取的值!
//似乎跟包含它的窗口的大小变化有关
if(document.body.offsetHeight) docHei = offsetHei = document.body.offsetHeight;
if(document.body.scrollHeight) docHei = scrollHei = document.body.scrollHeight;
} else
if(document.documentElement) {
if(document.documentElement.offsetHeight)
docHei = offsetHei = document.documentElement.offsetHeight;
if(doc.documentElement.scrollHeight)
docHei = scrollHei = doc.documentElement.scrollHeight;
}
return docHei;
}
3、最后修改Iframe的高度,并用一个定时器来不间断检查它包含的页面的高度变化
function doReSize() {
var iframeWin = window.frames['ifrm'];
var iframeEl = window.document.getElementById? window.document.getElementById('ifrm'):
document.all? document.all['ifrm']: null;
if ( iframeEl && iframeWin ) {
var docHei = getDocHeight(iframeWin.document);
if (docHei != iframeEl.style.height) iframeEl.style.height = docHei + 'px';
} else
if(iframeEl) {
var docHei = getDocHeight(iframeEl.contentDocument);
if (docHei != iframeEl.style.height) iframeEl.style.height = docHei + 'px';
}
}
function runResizeTask() {
doReSize();
setTimeout("runResizeTask()",500);//每隔半秒执行一次
}
runResizeTask();
在这里就没有去考虑被包含的页面中是否有折叠、隐藏/展现的情况了!