postMessage 通信 | Iframe 通信

一、Iframe 传值，父级监听

1、Iframe 向父级传递消息

// 父级 hostName 
const mainHost = 'http://localhost:9527'

// message 可以是任何类型，为了在回调中做区分，建议传 Object 
window.parent.postMessage(message, mainHost);

2、父级监听 iframe 消息

window.addEventListener('message', this.iframeMessageCall, false)

// message 消息回调函数
iframeMessageCall(e: any) {
	...
}

二、父级传值，Iframe 监听

1、父级传值给 Iframe (TS写法，js 去掉类型断言)

父级判断 Iframe 是否有效，且只有 Iframe 加载完毕后才能成功传递 message

// Iframe hostName
const mainHost = 'http://localhost:8083'
// 判断 Iframe 是否有效
const isIFrame = (input: HTMLElement | null): input is HTMLIFrameElement =>
input !== null && input.tagName === 'IFRAME'

let frame = document.getElementById('pannelIframe')
if (isIFrame(frame) && frame.contentWindow) {
  // 判断 Iframe 加载完
  if((<any>frame).attachEvent) {
    (<any>frame).attachEvent("onload", ()=>{
      (<any>frame).contentWindow.postMessage(message, mainHost)
    })
  } else {
    frame.onload = ()=> {
      (<any>frame).contentWindow.postMessage(message, mainHost)
    }
  }
}

2、Iframe 监听父级消息

window.addEventListener('message', this.faMessageCall, false)

// message 消息回调函数
faMessageCall(e: any) {
	...
}