首先说明下,iframe通信 分为:同域通信 和 跨域通信。
一、
同域通信
所谓同域通信是指 http://localhost/demo/iframe/iframeA.html 下的a.html页面嵌套 iframe
比如:
b不是个函数 但是我在子页面明明定义了这么一个函数,那么为什么会报这样的错误呢?经过仔细分析及google,发现有这么一个问题需要理解,当iframe没有加载完成后 我就去执行这个js会报这样的错误,所以就试着在火狐下 用iframe.onload
这个函数 进行测试,果然没有报错,是正确的 所以就确定是这个问题。所以就想写个兼容IE和火狐 google写个函数 来确定iframe已经加载完成!,其实给个回调函数来调用我们上面的方法。
综合上面的思路 就可以写个这样的代码:
B.html 代码如下:
子页面调用父页面的函数很简单,只要这样搞下就ok了,window.parent.A();
子页面取父页面元素的值: window.parent.document.getElementById("topName").innerHTML
等方法。
二: iframe跨域通信。
iframe跨域访问一般分为2种情况,
第一种是同主域,不同子域的跨域。 第二种是:不同主域跨域。
1、 是同主域下面,不同子域之间的跨域;可以通过document.domain 来设置相同的主域来解决。
假如现在我有个域 abc.example.com 下有个页面叫abc.html,页面上嵌套了一个iframe 如下:
abc.HTML代码如下:
def.HTML代码如下:
a.HTML代码如下:
假如现在def.html页面有个child函数 代码如下:
就可以跨域调用了 不管是子页面调用父页面 还是父页面调用子页面。一切ok!
2、 是不同主域跨域;
虽然google有几种方法关于不同主域上的跨域问题 有通过location.hash
方法或者window.name
方法或者html5及flash等等,但是我觉得下面iframe这种方法值得学习下,
如下图所示:域a.com的页面request.html(即http://a.com/demo/ajax/ajaxproxy/request.html)里面嵌套了一个iframe指向域b.com(http://b.com/demo/ajax/ajaxproxy/response.html)的response.html,而response.html里又嵌套了域a.com的proxy.html。
思路:要实现a.com域下的request.html页面请求域b.com下的process.PHP,可以将请求参数通过url传给response.html,由response.html向process.PHP发起真正的ajax请求(response.html与process.PHP都属于域b.com),然后将返回的结果通过url传给proxy.html,最后由于proxy.html和request.html是在同个域下,所以可以在proxy.html利用window.top 将结果返回在request.html完成真正的跨域。
ok,先看看页面结构
a.com域下有:
request.html
proxy.html
b.com域下有:
response.html
process.PHP
先来看看request.html页面如下:
这个页面其实就是要告诉response.html:我要让你执行你定义好的方法GetPerson
,并且要用我给你的参数'{"id" : 24}'。response.html纯粹是负责将CallBack
这个方法名传递给下一位仁兄proxy.html,而proxy.html拿到了CallBack
这个方法名就可以执行了,因为proxy.html和request.html是同域的。
response.HTML代码如下:
这里其实就是接收来自request.html的请求得到请求参数和方法后向服务器process.PHP发出真正的ajax请求,然后将从服务器返回的数据以及从request.html传过来的回调函数名传递给proxy.html。
接下来看看PHP代码如下
,其实就是想返回一个json数据:最后就是proxy.HTML代码:
这里也是最后一步了,proxy终于拿到了request.html透过response.html传过来的回调函数名以及从response.html直接传过来的响应数据,利用window.top执行request.html里定义的回调函数。
三、iframe高度自适应的问题。
iframe高度自适应分为2种,
一种是同域下自适应 另外一种是跨域下自适应
,下面我们来看看同域下iframe高度自适应的问题。
1.同域下iframe高度自适应的问题:
思路:获取被嵌套iframe元素,通过JavaScript取得被嵌套页面最终高度,然后在主页面进行设置来实现。
假如我们demo有iframe1.html和iframe2.html