实现父子按钮样式_利用 postMessage 实现父子页面通信

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

父页面有一个列表，每一个列有一个"编辑"按钮，点击按钮打开一个新的 tab 页面为子页面

子页面是某一列内容的编辑页面，子页面有一个"保存并关闭"的按钮

点击子页面的"保存并关闭"的按钮，子页面关闭，向主页面发起一次通信，告知主页面需要刷新列表

主页面接受子页面的通信，根据父子页面约定好的标识，判断是否需要刷新数据列表，是的话执行刷新列表操作，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 对象，我们知道在 中提供了一个用于父子页面交互的对象，叫做 window.parent，我们可以通过 window.parent 对象来从框架中的页面访问父级页面的 window。opener 和 parent 一样，只不过用于 在新标签页打开的页面，我们可以直接使用 window.opener 来访问来源页面的 window 对象。

当然如果父页面被手动关闭了的话，window.opener 也就变成了 null，所以需要加一个 window.opener 是否存在的判断，然后再调用父页面的 postMessage 方法，targetOrigin则直接使用父页面的 origin，这里我没有写死。这样子页面的逻辑就完整了。

注意，使用 target="_blank" + opener 的方式有可能是危险的，进一步了解：危险的 target="_blank" 与 “opener”

再就是父页面中 addEventListener('message') 的回调函数了，从回调函数中可以拿到 event 对象，event 中有三个属性：① data，也就是接收到的信息(注意: 在 Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3)之前， 参数 message 必须是一个字符串。 从 Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3)开始，参数 message被使用结构化克隆算法进行序列化。这意味着您可以将各种各样的数据对象安全地传递到目标窗口，而不必自己序列化它们。)；② origin，就是 postMessage 中的 targetOrigin 参数，用来过 origin 过滤；③ source，对发送消息的窗口对象的引用；可以使用这个参数来使具有不同 origin 的两个窗口之间建立双向通信，因为这个应用场景没有这个需求，所以这块就不展开说明了。

这样我们就知道了 event.origin === window.location.origin 的作用，根据 origin 这过滤其他 origin 传递过来的信息。这个判断很重要，不加就很多可能会被 XSS 攻击！

至此所有的知识点就介绍完了，更多细节请参考以下链接：