window.postMessage() 方法可以安全地实现跨域通信。通常，对于两个不同页面的脚本，只有当执行它们的页面位于具有相同的协议（通常为https），端口号（443为https的默认值），以及主机 (两个页面的模数 Document.domain设置为相同的值) 时，这两个脚本才能相互通信。window.postMessage() 方法提供了一种受控机制来规避此限制，只要正确的使用，这种方法就很安全。

一、安装live-server

要想实现跨窗口通信，必须要在服务器上运行，直接用浏览器打开HTML文件只能处理单个文件，窗口之间无法通信。

npm install -g live-server

使用命令live-server进行启动。

安装live-server，在任意位置启动服务器。

在服务器中启动之后，会看见文档中多了一个script标签。这段代码是由live-server插入的。当运行在后台的live-server检测到文件变化，就会通过websockt向网页发送“reload”消息，从而可以实现浏览器中的网页总是实时的响应文件的变更。

// = 0 ? '&' : '?') + '_cacheOverride=' + (new Date().valueOf());                    }                    head.appendChild(elem);                }            }            var protocol = window.location.protocol === 'http:' ? 'ws://' : 'wss://';            var address = protocol + window.location.host + window.location.pathname + '/ws';            var socket = new WebSocket(address);            socket.onmessage = function(msg) {                if (msg.data == 'reload') window.location.reload();                else if (msg.data == 'refreshcss') refreshCSS();            };            console.log('Live reload enabled.');        })();    }    // ]]>

二、基础知识

MessageEvent有以下几个属性：

• data：从其他window中传递过来的对象
• origin：调用 postMessage 时消息发送方窗口的 origin
• source：对发送消息的窗口对象的引用; 您可以使用此来在具有不同origin的两个窗口之间建立双向通信。

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

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

三、最简单的一个demo

父窗口打开一个子窗口，然后询问子窗口：“吃饭了吗”，子窗口回复父窗口：“吃了”

father.html

son.html

四、一个网页聊天系统

father.html

myson.html

五、最后一个demo

son.html

        点我返回    
    

六、安全问题

如果您不希望从其他网站接收message，请不要为message事件添加任何事件侦听器。

如果您确实希望从其他网站接收message，请始终使用origin和source属性验证发件人的身份。

当您使用postMessage将数据发送到其他窗口时，始终指定精确的目标origin，而不是*。

参考资料