关于iframe:Iframe标签的传值方式父发给子子接收父的消息-子发给父父接收子的消息

47次阅读

共计 892 个字符，预计需要花费 3 分钟才能阅读完成。

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

正文完