iframe高度自适应bylin49940

最新推荐文章于 2022-03-21 14:00:09 发布

lin49940

最新推荐文章于 2022-03-21 14:00:09 发布

阅读量2.1k

点赞数

分类专栏： JavaScript 文章标签： iframe function null 浏览器 javascript scroll

本文链接：https://blog.csdn.net/lin49940/article/details/4639870

版权

JavaScript 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

以前没啥时间, 乱写了一个, 最近有空, 把整个代码重写了一遍, 修改了一些bug

<HTML> <HEAD> <TITLE>IE FF iframe 自适应高度v2.0 by lin49940 </TITLE> </HEAD> <BODY> <iframe name='myIfr' id='myIfr_1' frameborder=1 src="test2.html" mce_src="test2.html" scrolling='auto' width='100%' οnlοad='suitSelf(this)' > 您的浏览器不支持iframe, 请换其他浏览器查看此页面 </iframe> </BODY> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> </HTML>

1. iframe 的高度用的是clientHeight, scrollHeight, offsetHeight 中最大的一个, 我原来用clientHeight 的, 后来发现如果iframe在底下, clientHeight 的值就会很小.

2. 如果浏览器是ie, iframe的边框存在, 虽然是取了最大的高度, 但是还是会出现滚动条, 如果是IE浏览器, 并且iframe 有边框, 就取clientHeight, scrollHeight 和自定义高度中最大的一个再加上5px(可以更大)作为iframe 的高度. 其实还可以把自定义高度加进去比较的, 因为有时候你会想自己设定一个大一点的高度.

3. 添加了一个兼容性比较好的添加事件的方法.

4. 如果iframe 里面的内容发生变化, 高度增加了, 产生滚动条, 监听 iframe 的 scroll 事件. 如果出现滚动条, 并且有滚动, iframe 将再次自适应高度.

5. 强烈建议把 load事件写在 <iframe>的属性onload里, 这是兼容性最好的做法. 如果有迫不得已的情况, 我也提供了为iframe绑定load 事件的方法.

addEvent(myIfrObj.contentWindow,"load",function(){ suitSelf(myIfrObj)});

所以强烈建议把 load事件写在 <iframe>的属性onload里

6. 这个版本的最大改变就是对异常处理, 因为在子页面没完成加载或者跨域等情况下, 对子页面的操作会产生异常, 加强了这方面的处理.

}catch(e){//页面还没加载完成或跨域都会抛异常 //alert(e); if(!myIfrObj.timeHandleCount) myIfrObj.timeHandleCount = 1; else ++myIfrObj.timeHandleCount; if(myIfrObj.timeHandleCount <= trycount){ myIfrObj.timeHandle = setTimeout(function(){ suitSelf(myIfrObj) }, 200); //如果加载事件很长, 建议把等待时间加大 } }

timeHandleCount: 计数的值, 出现异常后再次尝试自适应的次数.

timeHandle: 延迟器setTimeOut的一个句柄, 延迟时间可以根据实践情况调整.

7. 子页面刷新后, 还是可以执行iframe 高度自适应方法, 并且这个方法是在子页面的 onload 事件后面执行的, 不会覆盖原来的方法.

写得不好的地方:

1. getBigger() 应该是只比较a,b ; 如果要比较a,b,c ; 可以 getBigger(getBigger(a,b),c); 我现在用的只能单纯比较3个

bug问题:

1. iframe高度只会增加, 不会减少.

3. 如果如jsp的页面中, <%%> 里面强制的执行了脚本命令, 可能有些意外情况(没测试)

以上在IE6.0, FF3.5 通过

下面是以前写的, 乱七八糟

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>IE FF iframe 自适应高度测试, 对于有自我保护的页面, 此方法不可以 </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD> <BODY οnlοad='onL()' > <input type='text' value='adfadf' id='myInp' /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <input type='button' value='hidden if1' id='myInp2' οnclick=''/> <input type='button' value='hidden if2' id='myInp3' οnclick='gg()'/> <br /> <iframe name='myIfr' id='myIfr_1' frameborder=0 src='test6.html' scrolling='auto' width='100%' οnlοad='suitSelf(this)' >您的浏览器不支持iframe, 请换其他浏览器查看此页面</iframe> <iframe name='myIfr' id='myIfr_2' frameborder=0 src='test5.html' scrolling='auto' width='100%' >您的浏览器不支持iframe, 请换其他浏览器查看此页面</iframe> <br /> </BODY> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> </HTML>

空闲的时间写的这个东西, 参考了不少人的资料, 不过我这个还是有些特点的啦.

1. iframe 的高度用的是clientHeight, scrollHeight, offsetHeight 中最大的一个. 我原来用clientHeight 的, 后来发现如果iframe在底下, clientHeight 的值就会很小.

2. 如果iframe 里面的内容发生变化, 高度增加了, 产生滚动条, 但是iframe 的onload 事件是不被触发的, 我不知道产生滚动条的事件, 只能监听 iframe 的 onscroll 事件. 如果出现滚动条, 并且有滚动, iframe 将再次自适应高度.

3. 强烈建议把 onload事件写在 <iframe>的属性onload里, 这是兼容性最好的做法. 如果有迫不得已的情况, 我也提供了为iframe绑定onload 和 onscroll 事件的方法.

myIfrObj.contentWindow.attachEvent("onload", new function(){ suitSelf(myIfrObj)});

注意: 这里用了 new Fun......() , 所以这里执行了一次, 但是以后iframe里面的页面刷新了, iframe 绑定的onload 事件是不会再次执行的, 这是一个问题.

所以强烈建议把 onload事件写在 <iframe>的属性onload里

4. 有判断iframe 的页面是否正确加载了, 如果出现异常, 就设置一个600 的高度给这个iframe .

5. test6.html 为一个简单的页面, test5.html 是一个内嵌了一个iframe 的页面, 两者都能正确自适应高度.

写得不好的地方:

1. getBigger() 应该是只比较a,b ; 如果要比较a,b,c ; 可以 getBigger(getBigger(a,b),c); 我现在用的只能单纯比较3个

2. 添加iframe 的绑定事件方法可以写通用的, 然后在依次添加onload, onscroll 及其他事件

bug问题:

1. 如果浏览器是ie, iframe的边框存在, 那么自适应的高度会差一些, 还是有滚动条出现.

2. iframe高度只会增加, 不会减少.

3. 如果如jsp的页面中, <%%> 里面强制的执行了脚本命令, 可能有些意外情况(没测试)

4. iframe 里面的页面刷新后, 如果不是把 onload事件写在 <iframe>的属性onload里的话, iframe 的onload 事件不会执行

以上在IE6.0, FF3.0 通过

lin49940

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
iframe高度自适应bylin49940

以前没啥时间, 乱写了一个, 最近有空, 把整个代码重写了一遍, 修改了一些bug IE FF iframe 自适应高度v2.0 by lin49940 您的浏览器不支持iframe, 请换其他浏览器查看此页面<!--//取3个数字中最大的function getBiggest(a, b, c){ if(isNaN(a))
复制链接

扫一扫

专栏目录