73 lines
2.7 KiB
Vue
73 lines
2.7 KiB
Vue
<script setup lang="ts">
|
||
// 不再需要 props 来接收数据
|
||
|
||
// 获取 iframe 的 DOM 引用
|
||
const iframeRef = ref<HTMLIFrameElement | null>(null);
|
||
|
||
// iframe 的 src URL，指向 Spectrogram.html
|
||
const src = computed(() => import.meta.env.BASE_URL + 'html-page/Spectrogram.html');
|
||
|
||
// 标记 iframe 是否已加载完成并已发送初始化指令
|
||
const isIframeInitialized = ref(false);
|
||
|
||
// iframe 加载完成后的回调
|
||
function onIframeLoad() {
|
||
console.log('[🧩] 组件 (频谱图): iframe 已加载');
|
||
// 发送初始化指令给 iframe
|
||
if (iframeRef.value?.contentWindow) {
|
||
console.log('[🧩] 组件 (频谱图): 向 iframe 发送 INIT_WIDGET 指令');
|
||
// targetOrigin 设置为 '*' 为了简单，生产环境应指定确切来源
|
||
// 可选：如果需要传递配置，可以在 INIT_WIDGET 消息中包含 config
|
||
iframeRef.value.contentWindow.postMessage({ type: 'INIT_WIDGET' /*, config: props.config */ }, '*');
|
||
isIframeInitialized.value = true; // 标记已发送初始化指令
|
||
|
||
// 发送初始数据（如果已有）
|
||
// 稍微延迟发送，给 iframe 一点时间处理 INIT_WIDGET
|
||
setTimeout(() => {
|
||
// 初始数据将通过暴露的方法发送，这里不再处理
|
||
console.log('[🧩] 组件 (频谱图): iframe 初始化完成，等待通过 ref 调用发送数据。');
|
||
}, 0);
|
||
} else {
|
||
console.error('[🧩] 组件 (频谱图): 无法访问 iframe 的 contentWindow');
|
||
}
|
||
}
|
||
|
||
// 将数据发送到 iframe 的函数
|
||
function sendDataToIframe(payload: Array<number>, time: string) {
|
||
// 添加 time 参数
|
||
// 确保 iframe 存在、其 contentWindow 可访问且已发送初始化指令
|
||
if (iframeRef.value?.contentWindow && isIframeInitialized.value) {
|
||
console.log('[🧩] 组件 (频谱图): 向 iframe 发送数据:', payload, '时间:', time);
|
||
// 使用 toRaw 获取原始数据对象
|
||
// 将时间和数据一起发送
|
||
iframeRef.value.contentWindow.postMessage({ type: 'FEED_DATA', payload: toRaw(payload), time: time }, '*');
|
||
} else {
|
||
console.warn('[🧩] 组件 (频谱图): iframe 未初始化或数据无效，无法发送 FEED_DATA 消息。');
|
||
}
|
||
}
|
||
|
||
// 不再需要监听 props
|
||
|
||
// 可选：监听来自 iframe 的 WIDGET_READY 消息以实现更精确的控制 (与星座图类似)
|
||
// onMounted(() => { ... });
|
||
// onUnmounted(() => { ... });
|
||
// function handleIframeMessage(event: MessageEvent) { ... }
|
||
|
||
// 暴露 sendDataToIframe 方法给父组件
|
||
defineExpose({
|
||
sendData: sendDataToIframe,
|
||
});
|
||
</script>
|
||
|
||
<template>
|
||
<iframe ref="iframeRef" :src="src" frameborder="0" allowfullscreen @load="onIframeLoad"></iframe>
|
||
</template>
|
||
|
||
<style scoped>
|
||
iframe {
|
||
border: none; /* 移除边框 */
|
||
width: 100%; /* 默认占满容器 */
|
||
height: 100%; /* 默认占满容器 */
|
||
}
|
||
</style>
|