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中不支持这种方式,请各位大佬帮忙看看,有没有什么好的解决方案。

上海
浏览 99
收藏
1
分享
1 +1
1
+1
全部评论 1
 
hello,有解决方案了吗?
· 陕西省
回复