window.postMessage实现跨域通信

# window.postMessage概述

1.html5最常用的API之一，实现两个不同域窗口对象之间的数据通信。

2.在发送数据窗口执行：otherWindow.postMessage(msg,origin)

• otherWindow:表示接受数据的窗口的window对象，包括iframe的contentWindwohe和通过window.open打开的新窗口。
• msg表示要发送的数据，包扩字符串和对象(ie9以下不支持，可以利用字符串和json互换)。
• origin表示接收的域名。

3.在接受的窗口监听window的message事件，回掉函数参数接受一个事件对象event，包括的属性有：

• data：接受的数据
• origin：发送端的域
• source：发送端的DOMWindow对象

# 利用window.postMessage在框架之间发送数据

1.在父框架页面index.html发送obj对象给远程服务器的wozien.com/test/b.html，该页面是通过iframe加载的，如下

2.在远程页面b.html中监听message事件，先通过origin属性判断下数据来源的域是否可信任，加强安全措施。具体代码如下：

	
	


	
this is my server

3.在控制输出结果：

另外还可以在打开的新窗口中相互通信，具体查看 相关链接演示。