|
@@ -0,0 +1,28 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <el-button @click="postMessage">发送消息给父窗口</el-button>
|
|
|
+ <p>来自父级的消息: {{ iframeMessage }}</p>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script setup lang="ts" name="testIframe">
|
|
|
+import { onMounted, ref } from "vue";
|
|
|
+const postMessage = () => {
|
|
|
+ window.parent.postMessage(
|
|
|
+ {
|
|
|
+ type: "FROM_CHILD",
|
|
|
+ data: "Hello from iframe!",
|
|
|
+ },
|
|
|
+ "*"
|
|
|
+ );
|
|
|
+};
|
|
|
+const iframeMessage = ref("");
|
|
|
+onMounted(() => {
|
|
|
+ window.addEventListener("message", (event) => {
|
|
|
+ if (event.data.type === "FROM_PARENT") {
|
|
|
+ console.log("Parent says:", event.data.data);
|
|
|
+ iframeMessage.value = event.data.data;
|
|
|
+ }
|
|
|
+ });
|
|
|
+});
|
|
|
+</script>
|
|
|
+<style scoped lang="scss"></style>
|