JS解决iframe之间通信和自适应高度的问题
前端之家收集整理的这篇文章主要介绍了
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);};
调用父页的
方法
*/
document.domain = 'example.com';
//window.top.test();
window.parent.test();
还是这两个页面 我想父页调用子页 如下方法：
调用子页的的
函数
*/
document.domain = 'example.com';
var iframe = document.getElementById('iframe2');
iframeIsLoad(iframe,function(){
var obj = iframe.contentWindow;
obj.child();
});
function iframeIsLoad(iframe,callback){
if(iframe.attachEvent) {
iframe.attachEvent('onload',function(){
callback && callback();
});
}else {
iframe.onload = function(){
callback && callback();
}
}
}
假如现在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页面如下：
这里其实就是接收来自request.html的请求得到请求参数和方法后向服务器process.PHP发出真正的ajax请求，然后将从服务器返回的数据以及从request.html传过来的回调函数名传递给proxy.html。
，其实就是想返回一个json数据：
PHP;">
id . ',"age" : 24,"sex" : "boy","name" : "huangxueming"}');
?>
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代码如下：
iframe2.html中的内容：
iframe2.html内容是怎么把值传给iframe3.html页面，刚才说了是将值传递到iframe3.html页面的href中，所以只要修改iframe的src就可以，因为不用刷新C页面，所以可以用过hash的方式传递给iframe3.html页面.iframe2.HTML代码如下：
