跳到正文
truedistance.org

在你的网站中嵌入真实比例太阳系计算器

将交互式比例尺计算器直接嵌入你的学校页面、天文博客、博物馆网站或教学平台。嵌入视图无广告、无 Cookie，也不会在框架内加载访问统计。

配置工具与 HTML 代码

可复制的 HTML 代码片段
<iframe src="https://www.truedistance.org/zh/embed/" title="真实比例太阳系计算器 — truedistance.org" width="100%" height="780" style="border:0;max-width:100%;width:100%" loading="lazy"></iframe>
<p><a href="https://www.truedistance.org/zh/">truedistance.org 真实比例太阳系计算器</a></p>
<script>window.addEventListener("message",function(e){if(!e.data||e.data.type!=="td-resize"||typeof e.data.height!=="number")return;var f=document.querySelectorAll("iframe");for(var i=0;i<f.length;i++){if(f[i].contentWindow===e.source)f[i].style.height=Math.ceil(e.data.height)+"px";}});</script>

请复制整个代码块：<iframe> 用于嵌入计算器，紧随其下位于框架外部的 <p><a href="…">…</a></p> 用于注明来源。

嵌入视图实时预览

三步完成嵌入

  1. 1. 选择初始参数。在上方设置语言、初始距离和最外侧天体。你网站上的访客依然可以自由交互修改所有数值。
  2. 2. 复制 HTML 代码。代码包含 <iframe> 以及紧随其下方的普通来源链接 <p><a href="…">…</a></p>。
  3. 3. 粘贴到你的网页中。在 WordPress 中使用“自定义 HTML”区块，在 Moodle 中切换到编辑器的 HTML 源码视图，或在任何 CMS 与静态网页的 HTML 元素中直接粘贴。

自动高度调整

根据模型止于地球（4 行）还是海王星（9 行），表格高度会发生变化。嵌入的计算器通过 ResizeObserver 测量自身高度，并向父页面发送 window.parent.postMessage({ type: 'td-resize', height }, '*')。配合上方附带的简短脚本，框架高度即可无缝自适应，不会出现双重滚动条。

隐私与许可协议

嵌入视图（/zh/embed/）不加载访问统计、不设置 Cookie，也不向任何外部服务器发起请求；字体和行星数据均直接由本域名提供（详见隐私政策）。因此你无需为该计算器添加 Cookie 弹窗。计算器与数据采用 CC BY 4.0 授权——保留框架下方的来源链接即可满足署名要求。

前往计算器