解决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有个致命的“BUG”就是iframe的高度无法自动适应,这一点让很多...
  • nebear
  • nebear
  • 2016年07月21日 16:45
  • 4650

跨域iframe高度自适应的多种方法

当 A页面中嵌入一个新页面B时,我们常常会使用 iframe来实现。当 A页面和 B页面在不同的域名下时,A页面就不能使用 Javascript 访问到的 B页面的高度,那么该如何解决这类问题呢?直接...
  • aaronpan21
  • aaronpan21
  • 2016年04月25日 21:42
  • 4282

iframe跨域调用问题

iframe框架之间的函数调用 知识点:iframe同域window对象的函数调用,iframe跨域window对象的函数调用。获取页面中iframe中的window对象介于兼容性的问题,推荐使用co...
  • stopllL
  • stopllL
  • 2017年04月11日 19:49
  • 4333

iframe跨域通信的通用解决方案-第二弹!(终极解决方案)

转自:http://justcoding.iteye.com/blog/2026396 iframe跨域通信的通用解决方案-第二弹!(终极解决方案) 一年前,我发过...
  • danfeixia
  • danfeixia
  • 2016年11月23日 15:37
  • 1125

前端跨域解决方法之window.name+iframe

window.name 传输技术,原本是 Thomas Frank 用于解决 cookie 的一些劣势(每个域名 4 x 20 Kb 的限制、数据只能是字符串、设置和获取 cookie 语法的复杂等...
  • ghostlpx
  • ghostlpx
  • 2016年08月15日 15:54
  • 2613

利用jsonp、iframe和location.hash解决跨域问题

几种解决js跨域的方法js的跨域:由于浏览器同源策略,凡是发送请求url的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域。如下示例:URL 说明 ...
  • yilanyoumeng3
  • yilanyoumeng3
  • 2015年06月17日 10:26
  • 2028

IE浏览器跨域访问iframe 中 Cookie/Session丢失解决方案

偶然中发现一个IE浏览器的问题:         站点aa.com的页面a.aspx中存在一个iframe,iframe的src为站点bb.com的b.aspx。b.aspx设置了一个COOKIE(不...
  • CHBOS
  • CHBOS
  • 2016年10月09日 10:10
  • 473

IE中iframe跨域访问

1      什么叫跨域?     指在A系统(第一方)中通过URL直接调用B系统(第三方),并且两个系统分别部署在不同的域内,简单的理解就是访问这两个系统需要不同的IP。后面说明也已A系统、B系统为...
  • ghsau
  • ghsau
  • 2013年10月30日 21:47
  • 13058

JS跨域(ajax跨域、iframe跨域)解决方法及原理详解

js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据。只要协议、域名、端口有任何一个不同,都被当作是不...
  • zoujunjie202
  • zoujunjie202
  • 2016年12月06日 22:03
  • 398

asp.net中iframe框架自适应高度的一种解决方法

在页面上添加一下JavaScript代码: function SetCwinHeight(){ var myframe=document.getElementById("iframe2");...
  • yangmingxing980
  • yangmingxing980
  • 2014年03月10日 17:00
  • 1199
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:解决iframe跨域高度自适应问题
举报原因:
原因补充:

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