Vue 中使用 Iframe 踩坑记

HunterX

一介码农

背景

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

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

难点

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

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

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

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

示例代码

多说无益，上代码。

// 父组件
<template>
  <div class="act-form">
    <iframe :src="src" ref="iframe"></iframe>
    <div @click="sendMessage">向 iframe 发送信息</div>
</template>
<script>
export default {
  data () {
    return {
      src: '你的src',
      iframeWin: {}
  mounted () {
    this.iframeWin = this.$refs.iframe.contentWindow
    this.$nextTick(() => {
      // 在外部 Vue 的 window 上添加 postMessage 的监听，并且绑定处理函数 handleMessage
      window.addEventListener('message', this.handleMessage)
  destroyed () {
      // 注意移除监听！注意移除监听！注意移除监听！
      window.removeEventListener('message', this.handleMessage)
  methods: {
    sendMessage () {
      // 外部vue向iframe内部传数据
      this.iframeWin.postMessage({
        cmd: 'doSomething',
        params: {}
      }, '*')
    handleMessage (event) {
      // 根据上面制定的结构来解析 iframe 内部发回来的数据
      const data = event.data
      switch (data.cmd) {
        case 'ready-for-receiving':
          // 业务逻辑
          break
</script>

// 子组件
<template>
    我是子组件
</template>
<script>
export default {
  data () {
    return {}
  mounted () {
    this.$nextTick(() => {
      window.addEventListener('message', this.handleMessage)
      // 告诉父组件准备好接收消息了
      window.parent.postMessage({
        cmd: 'ready-for-receiving'
      }, '*')
  destroyed () {
      // 注意移除监听！注意移除监听！注意移除监听！
      window.removeEventListener('message', this.handleMessage)
  methods: {
    handleMessage (event) {
      // 根据上面制定的结构来解析 iframe 内部发回来的数据
      const data = event.data
      switch (data.cmd) {
        case 'doSomething':
          // 业务逻辑