如何进行音讯通信(父发给子,子接管父的音讯;子发给父,父接管子的音讯)
办法一:间接通过获取父或者子的 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,判断是否是指定页面的消息来源