父组件:
<template>
<FramePage v-if="currentRoutePath" :frameSrc="currentRoutePath" @success="handleSuccess"/>
</template>
<script lang="ts" setup>
import {useTabs} from "/@/hooks/web/useTabs";
import FramePage from '/@/views/sys/iframe/index.vue';
import {ref} from "vue";
const currentRoutePath = ref() //页面路由
const {closeCurrent} = useTabs();
async function handleSuccess() {
await closeCurrent();
}
</script>
<style scoped>
</style>
success事件用于接受iframe组件的调用,关闭tab页。
iframe封装的组件FramePage:
<template>
<div :class="prefixCls" :style="getWrapStyle">
<Spin :spinning="loading" size="large" :style="getWrapStyle">
<iframe :src="frameSrc" :class="`${prefixCls}__main`" ref="frameRef" @load="hideLoading"></iframe>
</Spin>
</div>
</template>
<script lang="ts" setup>
import type { CSSProperties } from 'vue';
import {ref, unref, computed, onMounted, onBeforeUnmount} from 'vue';
import { Spin } from 'ant-design-vue';
import { useWindowSizeFn } from '/@/hooks/event/useWindowSizeFn';
import { propTypes } from '/@/utils/propTypes';
import { useDesign } from '/@/hooks/web/useDesign';
import { useLayoutHeight } from '/@/layouts/default/content/useContentViewHeight';
const emit = defineEmits(['register', 'success']);
defineProps({
frameSrc: propTypes.string.def(''),
});
const loading = ref(true);
const topRef = ref(50);
const heightRef = ref(window.innerHeight);
const frameRef = ref<HTMLFrameElement>();
const { headerHeightRef } = useLayoutHeight();
const { prefixCls } = useDesign('iframe-page');
useWindowSizeFn(calcHeight, 150, { immediate: true });
const getWrapStyle = computed((): CSSProperties => {
return {
height: `${unref(heightRef)}px`,
};
});
function calcHeight() {
const iframe = unref(frameRef);
if (!iframe) {
return;
}
const top = headerHeightRef.value;
topRef.value = top;
heightRef.value = window.innerHeight - top;
const clientHeight = document.documentElement.clientHeight - top;
iframe.style.height = `${clientHeight}px`;
}
function hideLoading() {
loading.value = false;
calcHeight();
}
</script>
<style lang="less" scoped>
@prefix-cls: ~'@{namespace}-iframe-page';
.@{prefix-cls} {
.ant-spin-nested-loading {
position: relative;
height: 100%;
.ant-spin-container {
width: 100%;
height: 100%;
padding: 10px;
}
}
&__mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
&__main {
width: 100%;
height: 100%;
overflow: hidden;
background-color: @component-background;
border: 0;
box-sizing: border-box;
}
}
</style>
iframe组件增加消息接收监听:
onMounted(() => {
window.addEventListener("message", handleMessage);
})
//页面销毁前解除监听
onBeforeUnmount(() => {
window.removeEventListener('message', handleMessage)
})
function handleMessage(event) {
console.log("子页面传过值event", event.data);
emit('success');
}
src对应的页面在提交数据后,传递消息给iframe:
function handleSubmit() {
try {
//todo 提交数据到后台
//用于传递消息,关闭父页面
window.parent.postMessage("success");
// // 刷新列表
} finally {
}
}
此时,iframe在接受到消息后调用父组件的success事件,父组件调用handleSuccess方法关闭选项卡。