使用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了,可以兼容全部主流浏览器了。
分享到:
相关推荐
完美解决跨域iframe的高度自适应,完美解决跨子域iframe的高度自适应,嵌入几个页面解决跨域iframe的高度自适应。。。
解决IE,Firefox,chrome,safari浏览器中iframe显示高度自适应问题
纯JS实现的iframe自适应高度。兼容主流浏览器。
iframe自适应高度(兼容多种浏览器) 亲测可以
iframe自适应高度和宽度
iframe 自适应高度iframe 自适应高度iframe 自适应高度iframe 自适应高度iframe 自适应高度iframe 自适应高度iframe 自适应高度iframe 自适应高度
iframe包含的页面的高度,兼容性好,iframe高度自适应
Iframe自动根据类容改变自己的大小,解决Iframe设置高度后无法缩小!拜一个高人所赐,特表示感谢!
用jquery实现iframe高度自适应实例代码完美兼容多数浏览器
因为有一个项目要用到iframe自适应高度,网上搜索了以下结果无数,不过看来看去都是那...iframe自适应高度,亲测完美兼容IE6_7_8_9,Chrome谷歌浏览器,Opera欧朋浏览器,FireFox火狐浏览器,Mac Safari浏览器等五大浏览器
Iframe框架高度自适应的实现.doc
iframe跨域嵌套自适应高度 iframe跨域嵌套 丢失session值(针对嵌套asp.net 做的网站)
iframe高度自适应代码及演示页面。 适合新手,用到iframe,并且需要高度自适应的人士。 老手自动绕行,又没什么技术含量。。。 解压之后,打开iframe-auto.html之后查看效果. 如果不能查看,检查是否允许执行js
iframe 跨域 自适应高度 模板 iframe 跨域 自适应高度 模板 iframe 跨域 自适应高度 模板
Iframe 高度自适应,js控制Iframe 高度自适应.docx
根据iframe内容高度自适应。不能确保所有的地方都能通用,但是大部分地方都能适用。
iframe根据引用的页面内容自适应高度和宽度,直接查看例子,简单易操作
有个在线例子,访问地址:http://okiner.cn/demo/cross-domain/iframe.html,这是源码,方便下载
iframe高度自适应,多浏览器兼容 已测试过在ie6,7,8,firefox8,chrom15中通过