使用postMessage实现iframe和父页面通信

语法

语法
otherWindow.postMessage(message, targetOrigin, [transfer]);
otherWindow 其他窗口的一个引用，例如向子窗口发送 则otherWindow 是子窗口的window对象

父页面向子页面Iframe通信

// 父页面
     //获取iframe元素
    const iFrame:SafeAny = document.getElementById('myFrame')

    //iframe加载完毕后再发送消息，否则子页面接收不到message
    iFrame.onload = function(){

     //iframe加载完立即发送一条消息 iframe.contentWindow返回的是iframe的window对象 
     iFrame.contentWindow.postMessage('message1','*');
    }

// 子页面
    window.addEventListener('message', function (e) {
			try {
				console.log(e.data) // message1  
			} catch (error) {
				console.log(error)
			}
		},false)

子页面Iframe向父页面通信

// 子页面
// 注意要使用父页面的window window.parent
    window.parent.postMessage(JSON.stringify('message2','*');

// 父页面
     window.addEventListener('message', function (e) {
      try {
        console.log(e.data) // message2  
      } catch (error) {
        console.log(error)
      }
    },false)