Fork me on GitHub

跨iframe且跨域名之间实时通信的解决方案

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

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