同源策略
通常情况下，只有当两个页面的协议、主机、端口号都相同时，这两个页面才能相互通信，这个通信机制叫做浏览器的同源策略。
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框隐藏。
