From 05bc4acb9b2107bfad8200c0f1942a76367d7a00 Mon Sep 17 00:00:00 2001
From: luocong2016 <luocong2016@126.com>
Date: Fri, 1 Dec 2023 18:00:08 +0800
Subject: [PATCH] feat: iframe expose postmessage function (#3368)

* feat: iframe postmessage

iframe postmessage

* chore: prettier format code

---------

Co-authored-by: invalid w <wangjuesix@gmail.com>
---
 src/views/sys/iframe/index.vue | 31 ++++++++++++++++++++++++++++++-
 1 file changed, 30 insertions(+), 1 deletion(-)

diff --git a/src/views/sys/iframe/index.vue b/src/views/sys/iframe/index.vue
index 684718d1f..0847e6a70 100644
--- a/src/views/sys/iframe/index.vue
+++ b/src/views/sys/iframe/index.vue
@@ -12,13 +12,14 @@
 </template>
 <script lang="ts" setup>
   import type { CSSProperties } from 'vue';
-  import { ref, unref, computed } from 'vue';
+  import { ref, unref, computed, onMounted, onUnmounted } from 'vue';
   import { Spin } from 'ant-design-vue';
   import { useWindowSizeFn } from '@vben/hooks';
   import { propTypes } from '@/utils/propTypes';
   import { useDesign } from '@/hooks/web/useDesign';
   import { useLayoutHeight } from '@/layouts/default/content/useContentViewHeight';
 
+  const emit = defineEmits(['message']);
   defineProps({
     frameSrc: propTypes.string.def(''),
   });
@@ -54,6 +55,34 @@
     loading.value = false;
     calcHeight();
   }
+
+  const messageHandler = (e: MessageEvent) => {
+    emit('message', e.data);
+  };
+
+  const postMessage = (message: any, tragetOrigin: string, transfer?: Transferable[]) => {
+    const iframe = unref(frameRef);
+    if (!iframe) return;
+    iframe.contentWindow?.postMessage(message, tragetOrigin, transfer);
+  };
+
+  const reload = () => {
+    loading.value = true;
+    const iframe = frameRef.value;
+    if (!iframe) return;
+    iframe.contentWindow?.location.reload();
+    loading.value = false;
+  };
+
+  onMounted(() => {
+    window.addEventListener('message', messageHandler);
+  });
+
+  onUnmounted(() => {
+    window.removeEventListener('message', messageHandler);
+  });
+
+  defineExpose({ postMessage, reload });
 </script>
 <style lang="less" scoped>
   @prefix-cls: ~'@{namespace}-iframe-page';