使用 postMessage 解决 iframe 跨域通信问题

父页面发送消息

//父页面发送消息
//获取iframe元素
var myFrame = document.getElementById('myframe')

//iframe加载完毕后再发送消息，否则子页面接收不到message
myFrame.onload = function(){
  //给iframe 发送一条消息
 myFrame.contentWindow.postMessage('sendMsg','*');
}

子页面接受父页面消息

//子页面接受消息
//回调函数
function getParentMsg( event ) {
  console.log( '接受消息', event )
  //打印后的结果是  --- sendMsg
}
//监听message事件
window.addEventListener("message", getParentMsg, false);

---

子页面给父页面发消息

//给父页面发送消息，data为对象
parent.postMessage( {msg: 'sendMsgToParent'}, '*');

父页面接受子页面的消息

//回调函数
function getChildrenMsg(event) {
    console.log('msg', event)
}
//监听message事件
window.addEventListener("message", getChildrenMsg, false);