iframe实现高度自适应,兼容FF、Opera、Safari
来源:互联网 发布:用ps做淘宝店招 编辑:程序博客网 时间:2024/05/23 01:58
转自:iframe实现高度自适应,兼容FF、Opera、Safari
使用iframe可以省去很多ajax的复杂代码,但是在把iframe嵌入到div中会出现不能够自适应的问题,起初也在网上找了很多代码,大部分经过测试都不能兼容所有的浏览器。经过我在网上的搜索与相关的代码的修改,终于解决了兼容IE, FF, Opera 等大部分浏览器(Safari没有测试,应该也没问题)。
下面是我的代码,记录下来供以后参考:
index.html:
- <div id="right">
- <iframe id="rightFrame" name="frameContent" src="iframe.html"
- height="" scrolling="no" width="100%" frameborder="0"
- onload="SetCwinHeight(this)"></iframe>
- </div>
js代码:
- function SetCwinHeight(iframeObj){
- if (document.getElementById){
- if (iframeObj){
- if (iframeObj.contentDocument && iframeObj.contentDocument.body.offsetHeight){
- iframeObj.height = iframeObj.contentDocument.body.offsetHeight;
- } else if (document.frames[iframeObj.name].document && document.frames[iframeObj.name].document.body.scrollHeight){
- iframeObj.height = document.frames[iframeObj.name].document.body.scrollHeight;
- }
- }
- }
- }
iframe.html
- <div class="content">
- 有这样的名言叫:从哪跌倒,再从哪爬起来。想想自己,曾经跌倒过,却一直没能从那里爬起来。当年高考,虽然没有考
- 上理想的大学,但是却学到了理想的专业----工商管理。听起来很好地专业,因为这一专业毕竟和MBA有着千丝万缕的联系。所以那个时候很天真的给自己做了定位:努力学习,多学管理理论,将来一定要成为一名出色的职业经理人。为着这样的理想和目标,自认为我的大学生活还不算糜烂,因为毕竟有时间会光顾图书馆,阅读一些专业方面的书籍、报纸和杂志等,了解一些先进的管理理论和最新的经济前沿。
- 临近毕业,本来是满怀信心,希望自己可以得偿所愿,用这大学四年的所学来报答社会,谁知现实却是如此之残酷,我并未找
- </div>
iframe.html 中的js代码
- window.onload = function() {
- if(top.location != self.location){
- var a = window.parent.document.getElementsByTagName('iframe');
- for (var i=0; i<a.length; i++){
- if (a[i].name == self.name) {
- a[i].height = document.body.scrollHeight; return;
- }
- }
- }
- }
这样就OK了,可以兼容全部主流浏览器了。
0 0
- iframe实现高度自适应,兼容FF、Opera、Safari
- 为何firefox不支持insertRow和insertCell。我如何能让firefox显示和ie显示的效果一样?iframe实现高度自适应,兼容FF、Opera、Safari
- 真正的iframe高度自适应(兼容IE,FF,Opera)
- js实现的非跨域的iframe高度自适应(完美兼容IE,FF,Opera)
- iFrame自适应高度(兼容IE、谷歌、火狐、搜狗、opera、safari)
- iframe高度自适应,兼容IE,FF
- IE FF 兼容的IFRAME 自适应高度JS代码
- 设置iframe自适应高度(/*兼容FF/IE9/IE8/IE7/IE6*)
- iframe页面调用高度自适应方法代码,兼容IE,FF
- 跨域iframe高度自适应(兼容IE/FF/OP/Chrome)
- 跨域iframe高度自适应(兼容IE/FF/OP/Chrome)
- 跨域iframe高度自适应(兼容IE/FF/OP/Chrome)
- iFrame 自适应高度,在IE6/IE7/IE8/Firefox/Opera/Chrome/Safari
- 经典代码 iFrame 自适应高度,在IE6/IE7/IE8/Firefox/Opera/Chrome/Safari通过测试。
- iframe IE FF高度自适应
- iframe高度自适应(IE6+、FF、Opera、Chrome等测试通过)
- CSS解决未知高度垂直居中终极方案, 适应多栏结构, 兼容IE 5/6/7, FF/OPERA/SAFARI
- 兼容 ie,ff,Google,safari,opera 的回车事件
- 表达式求值nyoj35
- [面试珠玑]C++空类中的默认函数
- 二进制数据解析 + byteArray类型
- Java代码中的常见问题!
- 几种典型的 iOS 应用界面的交互框架各自的优缺点是什么?
- iframe实现高度自适应,兼容FF、Opera、Safari
- RGB表色系统
- 硬件创新无新意 苹果改以服务应战
- memcache启动停止
- 杭电acm2018母牛的故事
- Java 数组的拷贝
- Android Fragments详解二:创建Fragment
- SQL函数的分类
- 关于应用中支付中安全一些总结