iframe通信

众所周知，iframe能够嵌入其他网页并原样展现出来，比如展示一个pdf文件

<iframe
  title="pdf"
  src="线上pdf文件地址"
  style={{
    width: '100%',
    height: '100%'
  }}
/>

众所周知，后台web页面一般是用来配置和管理数据，最后通过前台h5展示到用户面前的

那么当我们想让在后台配置时能够预览h5页面应该怎么办呢？
这时候就可以通过iframe嵌入这个h5页面，并借助iframe通信来实现点击按钮预览的效果，接下来是代码实现

// 后台代码
import React, { useRef } from 'react'
import { ProCard } from '@ant-design/pro-components'
import { Button, Input, Form } from 'antd'

const EditActivity = () => {
  const iframeRef = useRef()
  const [form] = Form.useForm()
  return (
    <ProCard>
      <iframe title="活动" ref={iframeRef} src="前台页面地址" />
      <Form form={form} labelCol={{ span: 3 }} wrapperCol={{ span: 19 }}>
        <Form.Item
          name="activityName"
          label="活动名称"
          rules={[{ required: true, message: '请输入活动名称' }]}
        >
          <Input placeholder="请输入，最多10字" maxLength={10} />
        </Form.Item>
      </Form>
      <Button
        ghost
        type="primary"
        onClick={() => {
          form.validateFields().then(val => {
            const value = {
              activityName: '国庆节活动'
            }
            const { current } = iframeRef
            current.src = '前台页面地址' // 重新渲染iframe
            current.addEventListener('load', () => {
              current.contentWindow?.postMessage(value, '前台页面地址')
            })
          })
        }}
      >
        预览
      </Button>
    </ProCard>
  )
}
export default EditActivity

// 前台代码
<template>
  <div>
    <div class="home">活动名称:{{ data?.activityName }}</div>
  </div>
</template>

<script>
import { getCouponDetailApi } from '@/api/home.js'
export default {
  data() {
    return {
      data: {}
    }
  },
  created() {},
  mounted() {
    const { id } = this.$route.query
    if (!id) {
      this.isPreview = true
      this.getPreviewData()
    } else {
      this.getData()
    }
  },
  methods: {
    getData() {
      getCouponDetailApi().then(res => {
        const { data } = res
        this.data = data
      })
    },
    getPreviewData() {
      window.addEventListener('message', e => {
        if (window.parent !== e.source) {
          return
        }
        this.data = {
          ...e.data
        }
      })
    }
  }
}
</script>