iframe如何发送请求_Vue 中使用 Iframe 踩坑记

背景

创业项目使用的 Vue 开发前端，最近在开发的一个需求涉及到了 Iframe 的使用，为了让父子页面能够正常通信，头都搞大了。

不过最终是解决了问题，写篇文章记录下，利人利己。

难点

之前没有在 Vue 中使用过 Iframe，网上的相关内容也比较少，这次的主要难点有以下两个：

1. 如何优雅地嵌入 Iframe
2. 如何优雅地实现父子页面间的通信

第一点倒是不难，嵌入 Iframe 时使用 ref 属性，可以在父组件中优雅地获取到 Iframe 对象及其内部的所有对象。相比之下，比较棘手的是第二点。

父子页面通过 EventListener 监听信号，然后以 postMessage 方式进行发信。但是要注意 EventListener 的销毁和发信的时机（慎用 Iframe 的 onload 事件）。

示例代码

多说无益，上代码。

// 父组件

// 子组件
<template>
  <div>
    我是子组件
  </div>
</template>