关闭

解决iframe跨域高度自适应问题

标签: iframejavascriptfunction框架浏览器firefox
3842人阅读 评论(6) 收藏 举报
分类:

前期因项目需要解决iframe跨域高度自适应问题,但在网上找了许久也没找到能用的,几乎都是转载的,也没经过测试,当时就不了了知了。最近该项目又要实现这种功能,没办法,硬着头皮也要上呀。通过查阅资料及加上自己的理解,总算实现了这个功能,在这暂存以备后查。

交待下项目背景。两个独立的项目A与B且为独立的域名就叫做 www.abc.com与www.efg.com吧。在A项目中要调用B项目的一个页面并且被嵌入的页面中有链接的,点击链接会跳转到新页面,所以页面高度就会变化,需要的效果就是iframe的高度根据页面的内容自动调整。

页面准备:共需要三个页面,A项目两个页面,一个是要嵌入B项目页面的框架页面,叫iframe页面吧,另个是中间代理页面,叫agent页面吧;B项目需要一个页面,那就是要被iframe页面嵌套的页面,就叫content页面吧。

实现方法:在content页面中加上一段JavaScript代码,主要功能就是获取当前页面的高度,然后在该页面中插入个隐藏的iframe去访问agent页面,并在链接地址后加上content页面高度,看代码吧:

 

相关JavaScript代码用jQuery写的。用js代码生成的隐藏iframe访问A项目的agent页面,在后面有两个参数,t为当前时间,目的是为了避免浏览器缓存,#height增加锚点的方法是为了不刷新页面。我们再来看agent页面的代码:

 

通过对访问地址的处理可以得到#height的高度值,然后再将该值加在框架地址栏中,因为agent与iframe页面处于同域下所以没有跨域的问题。接下来我们要在iframe页面中对框架的高度进行处理:

 

iframe页面主要的功能就是从地址栏中读取#height的值,然后调整iframe高度,因为被嵌入页面content的页面是会变化的,所以每500毫秒就会检测下。目前在项目中实现的效果还是可以的。


2012-02-17更新:

据有些童鞋反应,在部分浏览器下或跨域时不能正常显示。今天都测了下,发现效果都还是可以的。

IETester模拟IE5-9均能正常显示。Chrome,Firefox也都是可以的。其他的暂时没测。

另:例子可以通过查看源文件知道,嵌入的iframe是在http://kinerli2.web16.7itt.com这个域名下的。而我们访问的例子是在http://okiner.cn这个域名下的。所以,跨域是没有问题的。

这个例子也仅限于两个站点自己都有管理权限的。如果没有管理权限的话,这种方法不适合。

 

例子访问地址:http://okiner.cn/demo/cross-domain/iframe.html

 

Demo源码下载:http://download.csdn.net/source/2982284

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:316887次
    • 积分:3429
    • 等级:
    • 排名:第9711名
    • 原创:49篇
    • 转载:10篇
    • 译文:0篇
    • 评论:71条
    最新评论