同源策略
通常情况下，只有当两个页面的协议、主机、端口号都相同时，这两个页面才能相互通信，这个通信机制叫做浏览器的同源策略。
window.postMessage() 可以摆脱同源策略的机制，实现跨源通信。
使用window.postMessage()
实现两页面之间实时通讯
首先准备两个运行在不同源的页面：
1、f.html
<body> <div>father</div> <input type="text" /> <iframe src="http://127.0.0.1:8002/s.html" frameborder="6"></iframe> </body> <script> var input = document.querySelector('input') var iframe = document.querySelector('iframe') input.addEventListener('input', function () { var text = input.value // postMessage第二个参数为目标源，最好不要使用*匹配所有目标源，防止数据泄露到恶意网站，因此这里指定单一网址 iframe.contentWindow.postMessage( { msg: text }, 'http://127.0.0.1:8002/s.html' ) }) </script>
2、s.html
<body> <div>son</div> <div id="msg"></div> </body> <script> var msg = document.getElementById('msg') window.addEventListener('message', function (e) { console.log(e) // 借助origin参数判断你想接收哪一个发送源网页发送过来的数据信息，参数值为协议、主机、端口号组成的字符串 if (e.origin !== 'http://127.0.0.1:8001') { return } msg.innerText = e.data.msg }) </script>
实现过程：
1、f.html页面为数据的发送方，iframe内联框中的s.html页面为数据的接收方
2、通过iframe.contentwindow.postMessage()给指定网页发送数据，通过监听message事件和获取MessageEvent对象来接收数据，使用MessageEvent对象中的origin属性指定接收谁发送过来的数据，防止接收到其他恶意信息。
实际中，为了样式美观，可以使用display:none将iframe框隐藏。
