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实现跨域通信
