页面嵌套h5（点击h5的关闭按钮向父组件发送关闭事件）

注意发送方和接收方必须使用同一个window对象

// 获取嵌套元素
let Element = document.getElementById('your-iframe-id'); // 替换为实际的元素的 ID

// 获取嵌套的window对象
let ElementWindow = Element.contentWindow;

// 发送消息到嵌套的窗口
ElementWindow.postMessage(message, '*');

1.h5

<template>
    <div>
        <button @click="close">关闭</button>
    </div>
</template>
<script>
    export default {
        methods:{
            close(){
                console.log('close')
                window.top.postMessage('close', '*');//*代表不限制域名
            }
        }
    }

2.页面嵌套h5

<template>
  <div class="">
    <el-button
      type="text"
      @click="dialogVisible = true"
    >点击打开 Dialog</el-button>

    <el-dialog
      :visible.sync="dialogVisible"
      width="80%"
    >
      <iframe
        src="http://localhost:8080"
        style="width: 1400px;height: 800px;"
      ></iframe>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="dialogVisible = false"
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data () {
    return {
      dialogVisible: false,
    };
  },
  watch: {
  },
  methods: {
  },
  mounted () {
    // 监听来自H5页面的消息的处理函数
    this.handleMessage = function (event) {
      console.log(event, 'event')
      if (event.origin === 'http://localhost:8080') {
        var messageData = event.data;
        if (messageData === 'close') {
          console.log('我关闭了')
          this.dialogVisible = false; // 关闭对话框
        } else {
          console.log('我不是')
        }
      }
    }.bind(this);

    // 添加消息监听器
    window.addEventListener('message', this.handleMessage);
  },
  beforeDestroy () {
    window.removeEventListener('message', this.handleMessage);
  },
};
</script>

<style lang="scss" scoped></style>