google N次 + 百度M次 + 试验了1605次之后（听说农药1605就是实验了这么多次后出来的），得出下面成果，在IE7及Firefox3里试了下还能凑合着用用！ 1、首先给出个Iframe。 复制代码 代码如下: <iframe id="ifrm" marginheight="0" marginwidth="0" height="100" width="1000" frameborder="0" scrolling="no" src="xxxxx.html"> </iframe> 2、然后看看怎么获取Iframe中的页面的高度。 其实最麻烦的就是怎么让获取的高度准确，不同的方式不同的浏览器中获取到的值都会不一样！晕啊～～。参考了多方意见得出以下javascript函数（doc参数为window.document对象）： 复制代码 代码如下: function getDocHeight(doc) { //在IE中doc.body.scrollHeight的可信度最高 //在Firefox中，doc.height就可以了 var docHei = 0; var scrollHei;//scrollHeight var offsetHei;//offsetHeight，包含了边框的高度 if (doc.height) { //Firefox支持此属性，IE不支持 docHei = doc.height; } else if (doc.body) { //在IE中，只有body.scrollHeight是与当前页面的高度一致的， //其他的跳转几次后就会变的混乱，不知道是依照什么取的值！ //似乎跟包含它的窗口的大小变化有关 if(doc.body.offsetHeight) docHei = offsetHei = doc.body.offsetHeight; if(doc.body.scrollHeight) docHei = scrollHei = doc.body.scrollHeight; } else if(doc.documentElement) { if(doc.documentElement.offsetHeight) docHei = offsetHei = doc.documentElement.offsetHeight; if(doc.documentElement.scrollHeight) docHei = scrollHei = doc.documentElement.scrollHeight; } /* docHei = Math.max(scrollHei,offsetHei);//取最大的值，某些情况下可能与实际页面高度不符！ */ 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(); 在这里就没有去考虑被包含的页面中是否有折叠、隐藏/展现的情况了！ 完整js代码复制代码 代码如下:<script language="javascript" type="text/javascript"> function getDocHeight(doc){ //在IE中doc.body.scrollHeight的可信度最高 //在Firefox中，doc.height就可以了 var docHei = 0; var scrollHei;//scrollHeight var offsetHei;//offsetHeight，包含了边框的高度 if (doc.height){ //Firefox支持此属性，IE不支持 docHei = doc.height; } else if (doc.body){ //在IE中，只有body.scrollHeight是与当前页面的高度一致的， //其他的跳转几次后就会变的混乱，不知道是依照什么取的值！ //似乎跟包含它的窗口的大小变化有关 if(doc.body.offsetHeight) docHei = offsetHei = doc.body.offsetHeight; if(doc.body.scrollHeight) docHei = scrollHei = doc.body.scrollHeight; } else if(doc.documentElement){ if(doc.documentElement.offsetHeight) docHei = offsetHei = doc.documentElement.offsetHeight; if(doc.documentElement.scrollHeight) docHei = scrollHei = doc.documentElement.scrollHeight; } /* docHei = Math.max(scrollHei,offsetHei);//取最大的值，某些情况下可能与实际页面高度不符！ */ return docHei; } function doReSize(){ var iframeWin = window.frames['Main']; var iframeEl = window.document.getElementById? window.document.getElementById('Main'): document.all? document.all['Main']: 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()",1000);//每隔1秒执行一次 } runResizeTask(); </script>

　　推荐阅读

　　基于jQuery的日期选择控件

但是也有些问题，第一画日历有点慢，第二兼容性不太好IE Only，第三它不是基于jQuery的哈哈。 那还是老规矩，做之前先看下效果 这下是更酷的Ext风格了。 从上图我们可以看出这个控件其实有两个视图一个日期月视>>>详细阅读

本文标题：Iframe 自适应高度并实时监控高度变化的js代码

地址：http://www.17bianji.com/kaifa2/JS/27823.html

 1/2    1