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

原创 2011年01月12日 17:08:00

前期因项目需要解决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

iframe自适应高度解决方案

经常会有父页面需要通过iframe嵌入另一个子页面,又要适时 根据子页面的高度调整父页面中iframe的高度,这就要求 页面必须具有自适应功能。自适应思想比较简单:就是父页面中iframe高度必须要适...

纯CSS3打造各式Checkbox开关按钮

纯CSS3打造各式Checkbox开关按钮 来源:mxria.com  时间:2012-09-21   图片展示的案例完全通过css3代码实现,未使用到任何图片,是不是超有现实感?咱...

iframe跨域 自适应高度的问题

昨天遇到的这个问题,觉得有必要记录一下。  简单介绍下原理:   现有iframe主页面main.html、被iframe嵌套页面iframe.html、iframe中介页面agent.html三个...

iframe跨域导致的高度自适应问题一网打尽

1、什么是iframe跨域导致的高度自适应问题 网页A中嵌套了iframe页面B,如果A和B不在同一个域名下,就形成跨域,两者之间的通信就会受到浏览器的某种限制。一种十分常见的场景是,A需要知道...
  • xjllsgs
  • xjllsgs
  • 2013年08月09日 16:11
  • 571

Iframe跨域自适应高度

  • 2012年09月10日 15:15
  • 2KB
  • 下载

iframe跨域自适应高度模板

  • 2011年02月16日 09:51
  • 1KB
  • 下载

Iframe跨域自适应高度(兼容IE/Firefox)终极解决方案

Iframe跨域自适应高度(兼容IE/Firefox)终极解决方案     main.html在A域,被包含的iframe.html、proxy.html以及proxy.js在B域...
  • congyq1
  • congyq1
  • 2011年12月01日 14:19
  • 734

解决跨域iframe自适应高度

关于iframe自适应高度的讨论可以先看看口碑UED的博客 http://ued.koubei.com/?p=1217 大概原理见下图: 可以直接看示例:http://lzlu.com...

iframe 跨域自适应高度

之前的一个项目,根据不同的
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:解决iframe跨域高度自适应问题
举报原因:
原因补充:

(最多只允许输入30个字)