繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > Iframe 自适应高度并实时监控高度变化的js代码
- Javascript
- JavaScript实现Sleep函数的代码
- 一个可以显示阴历的JS代码
- 从csdn弄下来的页面预先载入效果
- 键盘事件中keyCode、which和charCode 的兼容性测试
- 一个支持ff的modaldialog的js代码
- [js+css]点击隐藏层,点击另外层不能隐藏原层
- 用javascript实现页面打印的三种方法
- HTML-CSS群中单选引发的“事件”
- 一款不错的键盘密码输入js程序
- 限制文本字节数js代码
- 静态图片的十一种滤镜效果--不支持Ie7及非IE浏览器。
- 用javascript动态调整iframe高度的方法
- 用一段js程序来实现动画功能
- javascript实现划词标记+划词搜索功能
- javascript 简单高效判断数据类型 系列函数 By shawl.qiu
- 服务端 VBScript 与 JScript 几个相同特性的写法 By shawl.qiu
- 禁止F5等快捷键的JS代码
- 在textarea文本域中显示HTML代码的方法
- Javascript之文件操作
- 修改发贴的编辑功能
Javascript 中的 Iframe 自适应高度并实时监控高度变化的js代码
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2010-01-10 浏览: 483 ::
收藏到网摘: n/a
不得不用到iframe，且被强烈要求不能让它出现滚动条！嵌入的页面肯定是高度不一的，页面中也不能出现大片空白，所以也不能写死高度！真是麻鬼烦啊！ 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>
评论 (0) All
