82 lines
3.1 KiB
HTML
82 lines
3.1 KiB
HTML
<!doctype html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>星座图的html页面</title>
|
||
</head>
|
||
<body>
|
||
<div id="planispherewidget-container"></div>
|
||
<script src="./lib/konva.2.4.2.min.js"></script>
|
||
<script src="./lib/jquery.3.6.0.min.js"></script>
|
||
<script src="./planispherewidget.js"></script>
|
||
<script>
|
||
window.planisphereWidgetInstance = null;
|
||
|
||
// 监听来自父窗口的消息
|
||
window.addEventListener('message', (event) => {
|
||
// 强烈建议在此处添加来源验证 (event.origin) 以提高安全性
|
||
// 例如: if (event.origin !== 'YOUR_VUE_APP_ORIGIN') return;
|
||
|
||
if (!event.data) return; // 如果没有数据，则忽略
|
||
|
||
// 处理初始化消息
|
||
if (event.data.type === 'INIT_WIDGET') {
|
||
console.log('HTML 页面：收到初始化指令');
|
||
if (!window.planisphereWidgetInstance) {
|
||
// 创建 PlanisphereWidget 实例，指定容器 ID
|
||
window.planisphereWidgetInstance = new PlanisphereWidget('planispherewidget-container', {
|
||
// 从 planispherewidget.js 获取的默认值
|
||
bg_color: '#27293D', // 背景色
|
||
fore_color: '#CCCCCC', // 前景色
|
||
coor_color: '#1B1B24', // 坐标颜色
|
||
border_color: '#CCCCCC', // 边框颜色
|
||
wave_color: '#1D8CF8', // 波形颜色
|
||
margin_left: 0, // 左边距
|
||
margin_top: 0, // 上边距
|
||
// 您可以在这里覆盖上面的默认值，或者从 event.data.options 获取配置
|
||
// ...event.data.options // 如果 Vue 组件传递了配置
|
||
});
|
||
console.log('HTML 页面：PlanisphereWidget 已实例化');
|
||
} else {
|
||
console.log('HTML 页面：PlanisphereWidget 已存在，无需重复实例化');
|
||
}
|
||
// 可选：通知父窗口已准备好接收数据
|
||
// if (window.parent !== window) {
|
||
// window.parent.postMessage({ type: 'WIDGET_READY' }, '*'); // 使用更具体的 targetOrigin
|
||
// }
|
||
}
|
||
// 处理数据馈送消息
|
||
else if (event.data.type === 'FEED_DATA') {
|
||
if (window.planisphereWidgetInstance) {
|
||
console.log('HTML 页面：收到来自父窗口的数据:', event.data.payload);
|
||
if (Array.isArray(event.data.payload)) {
|
||
window.planisphereWidgetInstance.feed(event.data.payload);
|
||
} else {
|
||
console.error('HTML 页面：收到的数据格式无效:', event.data.payload);
|
||
}
|
||
} else {
|
||
console.warn('HTML 页面：Widget 尚未初始化，无法处理 FEED_DATA');
|
||
}
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
<style>
|
||
html,
|
||
body {
|
||
width: 100%;
|
||
height: 100%;
|
||
margin: 0;
|
||
padding: 0;
|
||
overflow: hidden; /* 防止滚动条出现 */
|
||
}
|
||
|
||
/* 确保容器占满整个 iframe */
|
||
body > div {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
</style>
|
||
</html>
|