父：
<template>
<div>
<div>
<button @click="() => handleAdd()">按钮{{ count }}</button>
</div>
<iframe id="m-iframe" src="http://localhost:3003/btn"></iframe>
</div>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
const count = ref(0);
const handleAdd = () => {
count.value++;
let iframe: any = document.getElementById('m-iframe')
let message = {
target: 'iframe',
data: 'Hello, I am your parent',
count: count.value
}
iframe.contentWindow.postMessage(message, '*')
};
const init = () => {
window.addEventListener(
"message",
function (event) {
if (event.data.target === "iframe") {
console.log("父应用接收消息:", event.data.data);
count.value = event.data.count;
}
},
false,
);
};
onMounted(() => {
init()
});
</script>子：
<script setup>
import { onMounted, ref, reactive } from 'vue'
import './index.css'
const count = ref(0)
const handleAdd = () => {
count.value++
let message = {
target: 'iframe',
data: 'Hello, I am your child!',
count: count.value
}
window.parent.postMessage(message, '*')
}
const init = () => {
window.addEventListener(
"message",
function (event) {
if (event.data.target === "iframe") {
console.log("子应用接收消息:", event.data.data);
count.value = event.data.count;
}
},
false,
);
};
onMounted(() => {
init()
})
</script>
<template>
<div>
<button @click="handleAdd">{{ count }}</button>
</div>
</template>
