HTML5 之 PostMessage 跨窗口通信

小渣渣

PostMessage 是 html5 新引进的一个可跨源通信 api，你可以通过这个 api，让主页面和任意 frame 类页面或 window.open 打开的页面进行双向通信。它的大概运作流程如下图：

JS 判断当前页面是否是 Iframe 或者 Popup 窗口
https://www.itsvse.com/thread-10342-1-1.html

postMessage(data,origin)方法接受两个参数：

（1）data:要传递的数据，html5规范中提到该参数可以是JavaScript的任意基本类型或可复制的对象，然而并不是所有浏览器都做到了这点儿，部分浏览器只能处理字符串参数，所以我们在传递参数的时候需要使用JSON.stringify()方法对对象参数序列化，在低版本IE中引用json2.js可以实现类似效果，

（2）origin：字符串参数，指明目标窗口的源，协议+主机+端口号[+URL]，URL会被忽略，所以可以不写，这个参数是为了安全考虑，postMessage()方法只会将message传递给指定窗口，当然如果愿意也可以建参数设置为"*"，这样可以传递给任意窗口，如果要指定和当前窗口同源的话设置为"/"；


自己给自己发消息和接收消息

代码如下：

登录可见。

父窗口给子窗口发送消息，子窗口接收消息

代码如下：

登录可见。

子窗口给父窗口发送消息，父窗口接收消息

代码如下：

登录可见。

另外，附上一个简单的侦听器/客户端模式在客户端进行跨域消息传递，地址：https://www.npmjs.com/package/post-robot

（完）

飞鱼

学习学习。。。

小渣渣

浏览器窗口通信之 post-robot 示例
https://www.itsvse.com/thread-10428-1-1.html