iframe嵌入页面跨域通信

在项目中可能会通过iframe直接将另一个页面嵌入进来，某些场景下还可能会进行一些消息的传递通信。之前做过一次，就是我们开发的主系统，然后下面还有很多子系统，子系统都是通过iframe嵌入进来的，然后为了实现某些需求，需要将token传递给子系统，拱子系统使用，但是当时一直忙着开发，忘记记录了，所以这篇算是补上吧

嵌入进来的页面的window跟我们现在的window已经不是同一个了，更不是同一个document。

然后跨域通信的话，父窗口向子窗口我们通过 iframe.contentWindow.postMessage 发送消息；子窗口向父窗口我们通过 window.parent.postMessage 发送消息；然后接受的话都是监听window的message事件，如下：

otherWindow.postMessage(message, targetOrigin, [transfer]);

• message

         是我们发送的信息，一般我会传个JSON，也可以是个对象、字符串。。

•  targetOrigin

        表示目标窗口的源，协议+域名+端口号，如果设置为“ * ”，则表示可以传递给任意窗口。 

第三个我暂时还没用过，感兴趣的伙伴可以自行找找看奥 

父窗口向子窗口发送消息

iframe.contentWindow.postMessage(JSON.stringify({
  type: 'www',
  ctx: '给你消息，收到了嘛?'
}), '*')

子窗口向父窗口发送消息 

window.parent.postMessage(JSON.stringify({
  type: 'yes',
  ctx: '我收到您发送的消息了！'
}), '*')

接受消息 

包括父窗口发送给子窗口的和子窗口发送给父窗口的，都一样，都是通过监听window的message事件 

// 接受消息
window.addEventListener('message', receiveMessage, false)

function receiveMessage(event) {
  const msg = JSON.parse(event.data)
  console.log(msg, '----->>>')
}

测试的完整代码 

父窗口

  
  
  
  


  

  

    SEND
    

      
    
  

  

子窗口 （iframe.html）

  
  
  
  


  

  

    我是Iframe
    SEND