以前没啥时间, 乱写了一个, 最近有空, 把整个代码重写了一遍, 修改了一些bug
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 事件的方法.
所以强烈建议把 load事件写在 <iframe>的属性onload里
6. 这个版本的最大改变就是对异常处理, 因为在子页面没完成加载或者跨域等情况下, 对子页面的操作会产生异常, 加强了这方面的处理.
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 通过
下面是以前写的, 乱七八糟
空闲的时间写的这个东西, 参考了不少人的资料, 不过我这个还是有些特点的啦.
1. iframe 的高度用的是clientHeight, scrollHeight, offsetHeight 中最大的一个. 我原来用clientHeight 的, 后来发现如果iframe在底下, clientHeight 的值就会很小.
2. 如果iframe 里面的内容发生变化, 高度增加了, 产生滚动条, 但是iframe 的onload 事件是不被触发的, 我不知道产生滚动条的事件, 只能监听 iframe 的 onscroll 事件. 如果出现滚动条, 并且有滚动, iframe 将再次自适应高度.
3. 强烈建议把 onload事件写在 <iframe>的属性onload里, 这是兼容性最好的做法. 如果有迫不得已的情况, 我也提供了为iframe绑定onload 和 onscroll 事件的方法.
注意: 这里用了 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 通过