iframe页面间通信

iframe父子页面间通信

• 相互调用对方的方法

子级页面调用父级页面

window.parent.父级页面方法(args)

父级页面调用子级页面

document.getElementById("iframeID").contentWindow.子级页面方法(args)

• localStorage / sessionStorage

localStorage 全局有效，sessionStorage当前标签页有效

跨源通信

window.postMessage() 方法可以安全地实现跨源通信。

/*
 * A窗口的域名是<http://example.com:8080>，以下是A窗口的script标签下的代码：
 */
// targetOrigin = http://example.org
otherWindow.postMessage(message, targetOrigin, [transfer]); 

// 假设当前页面没有改变location，这条语句会成功添加message到发送队列中去（targetOrigin设置对了）
otherWindow.postMessage("hello there!", "http://example.org");

function receiveMessage(event)
{
  // 我们能相信信息的发送者吗?  (也许这个发送者和我们最初打开的不是同一个页面).
  if (event.origin !== "http://example.org")
    return;

  // event.source 是我们通过window.open打开的弹出页面 popup
  // event.data 是 popup发送给当前页面的消息 "hi there yourself!  the secret response is: rheeeeet!"
}
window.addEventListener("message", receiveMessage, false);

/*
 * 弹出页 popup 域名是<http://example.org>，以下是script标签中的代码:
 */
window.addEventListener("message", receiveMessage, false);

//当A页面postMessage被调用后，这个function被addEventListener调用
function receiveMessage(event)
{
  // For Chrome, the origin property is in the event.originalEvent object.
  var origin = event.origin || event.originalEvent.origin;
  if (origin !== "http://example.com:8080")
    return;

  // 假设你已经验证了所受到信息的origin (任何时候你都应该这样做), 一个很方便的方式就是把event.source
  // 作为回信的对象，并且把origin作为targetOrigin
  event.source.postMessage("hi there yourself!  the secret response " +
                           "is: rheeeeet!",
                           origin);
  // ...
}

otherWindow
其他窗口的一个引用，比如iframe的contentWindow属性、执行window.open返回的窗口对象、或者是命名过或数值索引的window.frames。

// iframe id
document.getElementById('iframeID').contentWindow

// iframe name
window.frames['iframeID'].window

// iframe index 当前窗体的第几个 iframe
window.frames[1].window

targetOrigin
通过窗口的origin属性来指定哪些窗口能接收到消息事件，其值可以是字符串""（表示无限制）或者一个URI。在发送消息的时候，如果目标窗口的协议、主机地址或端口这三者的任意一项不匹配targetOrigin提供的值，那么消息就不会被发送；只有三者完全匹配，消息才会被发送。这个机制用来控制消息可以发送到哪些窗口；例如，当用postMessage传送密码时，这个参数就显得尤为重要，必须保证它的值与这条包含密码的信息的预期接受者的origin属性完全一致，来防止密码被恶意的第三方截获。如果你明确的知道消息应该发送到哪个窗口，那么请始终提供一个有确切值的targetOrigin，而不是。不提供确切的目标将导致数据泄露到任何对数据感兴趣的恶意站点。

注意

任何窗口可以在任何其他窗口访问此方法，在任何时间，无论文档在窗口中的位置，向其发送消息。 因此，用于接收消息的任何事件监听器必须首先使用origin和source属性来检查消息的发送者的身份。 这不能低估：无法检查origin和source属性会导致跨站点脚本攻击。

自定义事件监听传递数据方法：

const lis = (event)=>{console.log(event)} //事件监听方法
window.addEventListener('aaa',lis);  //添加事件监听
const a = new Event('aaa')  //创建事件
a.data = "someData"  //编辑事件数据
window.dispatchEvent(a)  //派发事件

window.removeEventListener('aaa', lis)  //移除事件监听

参考：
https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage
iframe+postMessage实现跨域通信