如何进行消息通信(父发给子,子接收父的消息; 子发给父,父接收子的消息)
方法一: 直接通过获取父或者子的window来操作 (限制: 必须同域)
// 父调用子的方法:
this.iframe.contentWindow.iframe的属性方法
// 或
document.getElementById("myIframe").contentWindow.iframe的属性方法
// 子调用父的方法:通过parent直接获取父的window
parent.document...
方法二:通过postMessage进行通信(限制: 需要父子约定)
// 父监听子消息:
window.addEventListener("message", () => this.listenFunc());
// 子发给父消息: 可通过window的属性找到对应的父(这里的parent表示直接上一级的父)
parent.postMessage(data, "*");
// 父给子发消息
document.getElementById("iframe").contentWindow.postMessage(JSON.stringify(data), "*")
// 子监听父的消息
window.addEventListener("message", () => this.listenFunc());
如何找到指定的子或者父window(如果iframe层级过多),又如何在发送消息时不影响其他的message监听
while(true) {
// 判断,找到要找的父window,可以通过在父的window上绑定属性来实现
if(currentWindow.isParent = true) {
currentWindow.postMessage(data, "*")
}
if(currentWindow == window.top) {
break; // 防止死循环
} else {
currentWindow = currentWindwo.parent;
}
}
origin是否有用event.origin 可以获取当前消息的来源路径,通过判断当前iframe的url,判断是否是指定页面的消息来源