window.postMessage() 方法可以安全地实现跨域通信和页面间数据通信。
postMessage 可用于解决以下方面的问题：
页面和其打开的新窗口的数据传递
页面与嵌套的 iframe 消息传递
多窗口之间消息传递
接口参数
otherWindow.postMessage(message, targetOrigin, [transfer]);
targetOrigin：
- 同源的话："/"
- 无限制：“*”
不同页面间通讯
A.html
// 发送消息 var child = window.open("B.html"); setTimeout(function () { child.postMessage("你好", "*"); }, 3000); // 接收消息 window.addEventListener("message", receiveMessage); function receiveMessage(event) { console.log(event.data); }
B.html
// 接收消息 window.addEventListener("message", receiveMessage); function receiveMessage(event) { event.source.postMessage(event.data, "*"); console.log(event); }
iframe父子通讯
A.html
<iframe id="iframe" src="B.html" frameborder="0"></iframe> <script> var iframe = document.getElementById("iframe"); iframe.onload = function () { // 发送跨域数据 iframe.contentWindow.postMessage("你好", "*"); }; // 接收消息 window.addEventListener("message", receiveMessage); function receiveMessage(event) { console.log(event.data); } </script>
B.html
// 接收消息 window.addEventListener("message", receiveMessage); function receiveMessage(event) { event.source.postMessage(event.data, "*"); console.log(event); }
参考
