这是一层vue对iframe的封装
<script lang="ts" setup>
import { propTypes } from '@/utils/propTypes'
defineOptions({ name: 'IFrame' })
const props = defineProps({
src: propTypes.string.def('')
})
const loading = ref(true)
const height = ref('')
const frameRef = ref<HTMLElement | null>(null)
const init = () => {
height.value = document.documentElement.clientHeight - 94.5 + 'px'
loading.value = false
}
defineExpose(
{frameRef}
)
onMounted(() => {
setTimeout(() => {
init()
}, 300)
})
</script>
<template>
<div v-loading="loading" :style="'height:' + height">
<iframe
ref="frameRef"
:src="props.src"
frameborder="no"
scrolling="auto"
style="width: 100%; height: 100%"
></iframe>
</div>
</template>
这里用到了setup语法糖 所以需要
defineExpose(
{frameRef}
)导出 子组件的ref。
这是父组件 ,也是父页面
<template>
<ContentWrap>
<IFrame ref="go" :src="src" />
</ContentWrap>
</template>
<script lang="ts" setup>
defineOptions({ name: 'GoView' })
const go = ref()
const src = 'http://127.0.0.1:3000'
onMounted(() => {
window.addEventListener("message", (e)=>{
if (e.data === "加载完成") {
console.log("加载完成")
go.value.frameRef.contentWindow.postMessage("测试","*")
}
})
})
</script>
首先获取父组件中IFrame的ref 在通过.value.子组件的ref名称来获取子组件的ref
go.value.frameRef
这段代码的作用是监听子组件初始化完成后发送加载完成的信息,再由于父页面向子页面发送消息
这是子组件中对父组件初始化完成后发送消息的代码
window.parent.postMessage("加载完成","*")
注意必须是window.parent.postMessage
window.postMessage是不行的