近期一项目有需求在祖传代码上加一个全新的功能模块。该功能模块主要功能都靠通信完成。因此想到了直接使用iframe嵌入祖传项目。新模块使用的是vue全家桶，本文内容主要涉及到iframe与祖传代码的通信与数据共享的一些问题总结。

postMessage是什么

正确使用window.postMessage() 方法可以安全地实现跨源通信。通常一个窗口可以获得对另一个窗口的引用（比如 targetWindow =window.opener），然后在窗口上调用 targetWindow.postMessage() 方法分发MessageEvent 消息。接收消息的窗口可以根据需要自由处理此事件。传递给 window.postMessage() 的参数（比如 message ）将通过消息事件对象暴露给接收消息的窗口。

postMessage使用方法（MDN关于postMessage的介绍 ）

otherWindow.postMessage(message, targetOrigin, [transfer]);
//otherWindow: 目标窗口，也就是你想要发送消息的窗口
//message: 将要发送到目标窗口的数据，一般建议用JSON.stringify处理一下，防止低版本浏览器不兼容。
//targetOrigin: 可以是字符串"*"（表示无限制）或者一个URI，通过窗口的origin属性来指定哪些窗口能接收到消息事件，在发送消息的时候，如果目标窗口的协议、主机地址或端口这三者的任意一项不匹配targetOrigin提供的值，那么消息就不会被发送；
//transfer:可选，是一串和message 同时传递的 Transferable 对象. 这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权。

问题1：父容器向iframe发送消息

parent.html

<iframe id="iframe" src="http://www.child.com/b.html"></iframe>

let iframe = document.getElementById('iframe');
iframe.onload = function(){
	let data = {message:'传递数据'}
    // 向子页面发送信息
    iframe.contentWindow.postMessage(JSON.stringify(data), 'http://www.child.com');
}
//接收子页面信息
window.addEventListener('message', function(e) {
   let data = JSON.parse(e.data)
   //逻辑操作
}, false);

问题2：iframe向父容器发送消息

//接收父页面的信息
window.addEventListener('message', function(e) {
   let data = JSON.parse(e.data)
   //逻辑操作
}, false);
// 发送消息
let data = {message:'传递数据'}
window.parent.postMessage(JSON.stringify(data), 'http://www.parent.com');

问题3：iframe获取父容器的cookie

1. 不同源情况（未尝试只给出思路）
   在iframe的onload事件里由父容器向iframe发送一条消息。将当前页面的window或者是document对象作为参数传递。子页面接收到信息可以直接取父元素中的cookie信息。
2. 同源情况
   同源情况下cookie是共享的只需要直接获取就OK了，一般建议部署代码尽量部署到相同的域名下，会省去很多麻烦。

//获取cookie函数
export function getCookie(key) {
  //有参数直接取参数对应的cookie值，否则返回全部cookie对象
  const cookieArray = window.document.cookie.replace(/\s/g, "").split(';')
  const cookieObject = {}
  cookieArray.forEach(item => {
    let objArr = item.split("=");
    cookieObject[objArr[0]] = objArr[1]
  })
  if (key) {
    return cookieObject [key]
  } else {
    return cookieObject 
  }
}

参考文章：https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage