原创文章，未经允许，请勿转载

如果你在寻找跨标签页通信解决方案请看这篇文章

1、利用postMessage

postMessage的函数原型：

otherWindow.postMessage(message, targetOrigin, [transfer]);

假设页面B(http://parent-frame.org:8080/b.html)嵌套了另一个域名下的页面A(http://frame.org:8080/a.html)

1、子向父发信息：

iframe内的 子页面 A

parent.postMessage("来自子页面的消息", "http://parent-frame.org:8080")

父页面 B

window.addEventListener("message", receiveMessage, false);

function receiveMessage(event) {
  var origin = event.origin
  //验证来源是否可信
  if (origin !== "http://frame.org:8080") {
    return
 }

 //解析事件数据
 //event.data

}

2、父向子发信息：

iframe内的 子页面 A

window.addEventListener("message", receiveMessage, false);

function receiveMessage(event) {
  var origin = event.origin
  //验证来源是否可信
  if (origin !== "http://parent-frame.org:8080") {
    return
 }

 //解析事件数据
 //event.data

}

父页面 B

document.querySelector('iframe').contentWindow.postMessage("来自父页面的消息", "http://frame.org:8080")

来源：悠游悠游，2019-05-13，原文地址：https://yymmss.com/p/iframe-communication.html