Pārlūkot izejas kodu

reactor:宜宾司法大屏改造

zhangchong 5 dienas atpakaļ
vecāks
revīzija
ec8d004e1f
2 mainītis faili ar 36 papildinājumiem un 0 dzēšanām
  1. 8 0
      src/router/index.ts
  2. 28 0
      src/views/test/index.vue

+ 8 - 0
src/router/index.ts

@@ -46,6 +46,14 @@ const routes: Array<RouteRecordRaw> = [
       title: `随手拍大屏展示`,
     },
   },
+  {
+    path: "/testIframe",
+    name: "testIframe",
+    component: () => import("@/views/test/index.vue"),
+    meta: {
+      title: `测试iframe`,
+    },
+  },
   {
     path: "/:pathMatch(.*)",
     name: "notFound",

+ 28 - 0
src/views/test/index.vue

@@ -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>