hotline-bs/src/views/test/index.vue

<template>
  <div>
    <el-input v-model="message" style="width: 240px"></el-input>
    <el-button @click="postMessage">发送消息给父窗口</el-button>
    <p>来自父级的消息: {{ iframeMessage }}</p>
  </div>
</template>
<script setup lang="ts" name="testIframe">
import { onMounted, ref, onBeforeUnmount } from "vue";

const message = ref("");
const postMessage = () => {
  window.parent.postMessage(
    {
      type: "FROM_CHILD",
      data: message.value,
    },
    "*"
  );
};
const handleMessage = (event) => {
  if (event.data.type === "FROM_PARENT") {
    iframeMessage.value = event.data.data;
  }
};
const iframeMessage = ref("");
onMounted(() => {
  window.addEventListener("message", handleMessage);
});
onBeforeUnmount(() => {
  window.removeEventListener("message", handleMessage);
});
</script>
<style scoped lang="scss"></style>