严浩
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>
|