解决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高度自适应的多种方法

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

iframe跨域 自适应高度的问题

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

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

Iframe跨域自适应高度(兼容IE/Firefox)终极解决方案     main.html在A域,被包含的iframe.html、proxy.html以及proxy.js在B域...

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

main.html在A域,被包含的iframe.html、proxy.html以及proxy.js在B域 main.html var aai=new AutoAdjus...

解决跨域iframe自适应高度

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

Iframe跨域自适应高度

内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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