wps加载项开发,使用iframe嵌套的页面怎么实现父子页面通信?
vue3+ts+vite开发wps加载项。
在wps中使用window.Application.ShowDialog打开页面,该页面中使用iframe嵌入了一个不同域名的子页面,父子页面想通过postMessage实现通信。
在浏览器中直接打开该页面,点击按钮,是可以正常通信并接收到数据的:
但是在wps中打开,点击按钮没有任何反应:
父子页面代码如下:
// 父页面 (http://localhost:3889/index.html#/system/about)
<script setup lang="ts">
import { onMounted, onUnmounted } from 'vue';
onMounted(() => {
window.addEventListener('message', handleMessage);
});
onUnmounted(() => {
window.removeEventListener('message', handleMessage);
});
const handleMessage = (event: any) => {
if (event.origin !== 'http://localhost:5173') return;
alert(JSON.stringify(event.data));
};
</script>
<template>
<iframe src="http://localhost:5173/" frameborder="0"></iframe>
</template>
// 子页面 (http://localhost:5173/)
<script setup lang="ts">
function test() {
try {
top?.window.postMessage(1, 'http://localhost:3889');
} catch (error) {
alert(JSON.stringify(error));
}
}
</script>
<template>
<div>
<button @click="test()">Test</button>
</div>
</template>
不知道是不是我的使用方式不对,或是wps中不支持这种方式,请各位大佬帮忙看看,有没有什么好的解决方案。