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);
}
参考
前端 postMessage