reactor:测试iframe通信;

src/layout/routerView/iframes.vue

@@ -1,20 +1,29 @@
 <template>
-	<div class="layout-padding layout-padding-unset layout-iframe">
-		<div class="layout-padding-auto layout-padding-view">
-			<div class="w100" v-for="v in setIframeList" :key="v.path" v-loading="v.meta.loading"
-				element-loading-background="white">
-				<transition-group :name="name">
-					<iframe :src="v.meta.isLink" :key="v.path" height="100%" width="100%"
-						style="position: absolute" :data-url="v.path" v-show="getRoutePath === v.path"
-						ref="iframeRef" />
-				</transition-group>
+	<div class="layout-padding">
+		<div class="layout-padding-auto layout-padding-view pd20">
+			<div v-for="v in setIframeList" style="overflow: hidden; width: 100%; height: 100%; flex: 1" :key="v.path" v-loading="v.meta.loading">
+				<iframe
+					:src="v.meta.isLink"
+					:key="v.path"
+					height="100%"
+					width="100%"
+					:data-url="v.path"
+					v-show="getRoutePath === v.path"
+					ref="myIframe"
+					@load="onIframeLoad"
+				/>
+			</div>
+			<div>
+				<el-input v-model="message" style="width: 240px"></el-input>
+				<el-button @click="sendToIframe">发送消息</el-button>
+				<p>来自iframe的消息: {{ iframeMessage }}</p>
 			</div>
 		</div>
 	</div>
 </template>
 
 <script setup lang="ts" name="layoutIframeView">
-import { computed, watch, ref, nextTick } from 'vue';
+import { computed, watch, ref, nextTick, onMounted, onUnmounted } from 'vue';
 import { useRoute } from 'vue-router';
 
 // 定义父组件传过来的值
@@ -36,7 +45,7 @@ const props = defineProps({
 	},
 });
 // 定义变量内容
-const iframeRef = ref<RefType>();
+const myIframe = ref<RefType>();
 const route = useRoute();
 // 处理 list 列表，当打开时，才进行加载
 const setIframeList = computed(() => {
@@ -49,8 +58,8 @@ const getRoutePath = computed(() => {
 // 关闭 iframe loading
 const closeIframeLoading = (val: string, item: any) => {
 	nextTick(() => {
-		if (!iframeRef.value) return false;
-		iframeRef.value.forEach((v: any) => {
+		if (!myIframe.value) return false;
+		myIframe.value.forEach((v: any) => {
 			if (v.dataset.url === val) {
 				v.onload = () => {
 					if (item.meta.isIframeOpen && item.meta.loading) item.meta.loading = false;
@@ -89,4 +98,51 @@ watch(
 		deep: true,
 	}
 );
+
+const iframeMessage = ref('');
+const message = ref('');
+const sendToIframe = () => {
+	if (!myIframe.value) return;
+
+	const iframeEl = myIframe.value.find(
+		(v: any) => v.dataset.url === getRoutePath.value
+	);
+
+	const iframeWindow = iframeEl?.contentWindow;
+	iframeWindow?.postMessage(
+		{
+			type: 'FROM_PARENT',
+			data: message.value,
+		},
+		'*'
+	);
+};
+
+const handleMessage = (event: MessageEvent<Message>) => {
+	if (event.data.type === 'FROM_CHILD') {
+		iframeMessage.value = event.data.data;
+	}
+};
+
+const onIframeLoad = () => {
+	console.log('iframe loaded');
+	window.addEventListener('message', handleMessage);
+};
+onMounted(() => {
+});
+
+onUnmounted(() => {
+	window.removeEventListener('message', handleMessage);
+});
 </script>
+<style>
+iframe {
+	border: none; /* 移除边框 */
+	outline: none; /* 移除聚焦时的轮廓线 */
+	background: transparent; /* 透明背景 */
+	margin: 0; /* 移除外边距 */
+	padding: 0; /* 移除内边距 */
+	display: block; /* 避免内联元素的额外空间 */
+	overflow: hidden; /* 隐藏滚动条 */
+}
+</style>