JS解决iframe之间通信和自适应高度的问题

首先说明下,iframe通信 分为:同域通信 和 跨域通信。

一、

同域通信

所谓同域通信是指 http://localhost/demo/iframe/iframeA.html 下的a.html页面嵌套 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 如下:

// 跨域 子页调用父页的 函数 (假设是下面test函数)
document.domain = 'example.com';
function test(){console.log(1);};

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页面如下:

New Document

这里其实就是接收来自request.html的请求得到请求参数和方法后向服务器process.php发出真正的ajax请求,然后将从服务器返回的数据以及从request.html传过来的回调函数名传递给proxy.html。 

接下来看看php代码如下

,其实就是想返回一个json数据:

id . ',"age" : 24,"sex" : "boy","name" : "huangxueming"}'); ?>

最后就是proxy.html代码:

New Document

  这里也是最后一步了,proxy终于拿到了request.html透过response.html传过来的回调函数名以及从response.html直接传过来的响应数据,利用window.top执行request.html里定义的回调函数。

三、iframe高度自适应的问题。

iframe高度自适应分为2种,

一种是同域下自适应 另外一种是跨域下自适应

,下面我们来看看同域下iframe高度自适应的问题。

1.同域下iframe高度自适应的问题:

思路:获取被嵌套iframe元素,通过JavaScript取得被嵌套页面最终高度,然后在主页面进行设置来实现。

假如我们demo有iframe1.html和iframe2.html

下面贴上iframe1.html代码如下:

New Document

iframe2.html中的内容:

iframe2.html内容是怎么把值传给iframe3.html页面,刚才说了是将值传递到iframe3.html页面的href中,所以只要修改iframe的src就可以,因为不用刷新C页面,所以可以用过hash的方式传递给iframe3.html页面.iframe2.html代码如下:

New Document