BluesCurry
BluesCurry

利用 postMessage 实现父子页面通信

下面介绍一种 postMessage 方式实现父子页面通信的方法，首先先了解一个应用场景：

  1. 父页面有一个列表，每一个列有一个"编辑"按钮，点击按钮打开一个新的 tab 页面为子页面
  2. 子页面是某一列内容的编辑页面，子页面有一个"保存并关闭"的按钮
  3. 点击子页面的"保存并关闭"的按钮，子页面关闭，向主页面发起一次通信，告知主页面需要刷新列表
  4. 主页面接受子页面的通信，根据父子页面约定好的标识，判断是否需要刷新数据列表，是的话执行刷新列表操作，over

这个需求在一些PC端的企业管理系统中经常会遇到，也是一个比较好的用户体验，下面先看实现方法（框架使用的是 vue），demo后有原理实现呦~！

父页面：

// "编辑"按钮
methods: {
  handleEdit() {
    window.open('www.xxx.com', '_blank');
  }
},
mounted() {
  // 接受子页面的请求信息
  window.addEventListener('message', (event) => {
    if (event.origin === window.location.origin) {
      // 根据接受到的信息执行对应的方法
      if (event.data === 'update') {
        // 这里调用刷新数据列表方法
      }
    }
  })
}

子页面：

methods: {
  // 关闭子页面并向父页面发起通信
  handleClosePage() {
    if (window.opener) {
      window.opener.postMessage('update', window.opener.origin);
    }
    window.close();
  }
}

首页第一个需要介绍的知识点是 HTML DOM 事件中的 "onmessage" 事件，这个事件的描述是"该事件通过或者从对象(WebSocket, Web Worker, Event Source 或者子 frame 或父窗口)接收到消息时触发"。在这个应用场景中"onmessage"的作用就是父窗口接收信息。

那如何向父页面传递信息呢，就用到了子页面中的 postMessage 方法，postMessage 可以安全地实现跨源通信，它接受三个参数，第一个是 message，也就是需要发送的信息；第二个是 targetOrigin，通过窗口的 orgin 属性来指定哪些窗口能接收到消息事件，其值可以是字符串"*"（表示无限制）或者一个URI。在发送消息的时候，如果目标窗口的协议、主机地址或端口这三者的任意一项不匹配targetOrigin提供的值，那么消息就不会被发送；只有三者完全匹配，消息才会被发送。这一点在传递一些比如密码之类的加密数据时尤为重要。强烈不建议用"*"，这样会有被恶意第三方截获的风险！ 第三个参数是一串和 message 同时传递的 Transferable 对象. 这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权。

这样通过 "onmessage" 和 postMessage 就可以实现父子页面的通信了，那为什么父子页面中都加了 if 的 case 拦截呢？下面一个一个说：

先介绍子页面的 window.opener 对象，我们知道在