iframe中父子页面跨域通讯

在非跨域的情况下，iframe中的父子页面可以很方便的通讯，在此不做描述。

但是在跨域的情况下，父子页面是无法获取到对方的。

一、跨域父传子，可以更改iframe的src，然后在子页面根据地址或参数做出相应的动作。

二、子页面传递父页面

方法1：

otherWindow.postMessage(message, targetOrigin, [transfer]);

• otherWindow
  其他窗口的一个引用，写的是你要通信的window对象。
  例如：在iframe中向父窗口传递数据时，可以写成window.parent.postMessage()，window.parent表示父窗口。
• message
  需要传递的数据，字符串或者对象都可以。

• targetOrigin
  表示目标窗口的源，协议+域名+端口号，如果设置为“*”，则表示可以传递给任意窗口。在发送消息的时候，如果目标窗口的协议、域名或端口这三者的任意一项不匹配targetOrigin提供的值，那么消息就不会被发送；只有三者完全匹配，消息才会被发送。例如：
  window.parent.postMessage('hello world','http://xxx.com:8080/index.html')
  只有父窗口是http://xxx.com:8080时才会接受到传递的消息。

• [transfer]
  可选参数。是一串和message 同时传递的 Transferable 对象，这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权。我们一般很少用到。

例如：子页面代码：

var info = {
	    message: "Hello Parent!"
	};
//发送跨域信息
function sendInfo() {
	window.parent.postMessage(info, '*');
}

父页面接收：

//接收跨域信息
    window.addEventListener('message', function(e){
        console.log(e.data.message);
    }, false);

方法2：增加一个与父页面同源的页面

例如：源1  有 A 、C 两个页面，源 2 有 B 页面

A的 iframe 中引入 B ， B的iframe 中引入 C ，

B 更改 iframe的src，然后在 C 中可用 top 获取 A 的对象和方法（相当于先向下传递，然后再向上传递了）