父框架与跨域子框架的通信

时间:2022-08-28 17:10:51

问题描述:
在HTML中,有个iframe,iframe中有一些其他的小的iframe,这些小的iframe的内容是其他主机的,然后我们希望能根据子iframe中内容的高度来动态调整iframe的高度。标题是父框架与自框架的通信,因为思路是一样的。
首先,明确何为跨域?
跨域是基于JavaScript的同源策略进行的限制。a.com域下的js文件无法操作b.com域下的js文件。简单的说,如果两个域下的js文件可以互相访问,那么必须要满足如下条件:相同协议、相同域名(同一域名下的不同子域也是不同域)、相同端口(同一主机、不同端口也不行)。具体详见下图

父框架与跨域子框架的通信

所以很明显,现在的需求是要求跨域访问的。

解决方案是:在小的iframe中再嵌套一个iframe,这个iframe与外部iframe同域(这样可以用来与外部的iframe进行交互)。这个小的iframe就好像在两个不同域之间搭了一个桥梁。因此又称代理frame。

整体业务流程是这样的:
1、大的iframeA加载内部iframeB,
2、在加载完iframeB后,又会去请求iframeC(iframeA与iframeC同域)
3、注意,这个时候不要在iframeC中设置src(否则会去自动请求)
4、在iframeB中获取iframeA的所有需要的数据,然后拼接成iframeC的URL。然后通过JS,给iframeC设置src
5、这个时候将会去请求iframeC,同时携带者iframeB的信息。
6、iframeC的内容是空的,内部只有js代码,通过在js代码中解析URL,来获取iframeB的信息(高度)。
7、现在轮到iframeC与iframeA之间的通信了,实际上是iframeC去调用iframeA中函数来设置iframeB的高度(有点乱)。
8、那问题来了,iframeC如何调用iframeA的函数呢?有人说用window.parent.prant…但是这个不适合这种场景,因为iframeC与iframeB是不同域,,,,所以就类似于iframeA和iframeC之间有个裂谷,不同访问,那咋办?只能是跨到地球的另一边与它相会,也就是在iframeC中调用top,top返回的是最顶端的框架,如果它的iframeA就是最顶端的框架,那问题就结束了。那如果不是呢?
9、比如,iframeA是最顶端下的一个iframe的iframe。
那获取iframeA就只能是top.frames[“level2”].frames[“level3”],获取到了iframeA,就可以直接调用iframeA中的函数来进行各种操作了。