在任意 HTML 网站中嵌入计算器
适用于手写页面、带自定义 HTML 块的建站器和静态站生成器。只要能编辑 HTML,一分钟搞定。
复制嵌入代码
示例是小数换算器 —— 按帮助中心列表换成任意挂件。
<iframe src="https://timecardcentral.com/embed/decimal/" width="100%" height="860" style="border:0;border-radius:12px" loading="lazy" title="Free calculator by TimeCard Central"></iframe>
把 用任意编辑器打开文件,找到 换成任意其他挂件并调整高度 —— 完整列表见 帮助中心 首页。唯一的要求是保留挂件内的署名链接。
<body>
用任意编辑器打开文件,找到 之间、通常位于主内容栏里的位置。 … 代码编辑器:简单 HTML 页面的 body 中已粘贴 iframe 代码 之间、通常位于主内容栏里的位置。把代码粘到那里 ①;预览 ② 就是访客看到的效果。
第 2 步:粘贴代码并部署
粘贴代码,保存,像其他改动一样部署或上传。挂件已在页面上线 ①,会在访客滚动到附近时才懒加载。
第 3 步:静态站生成器:Hugo、Jekyll、Astro、Eleventy
Markdown 文件里的原始 HTML 在这些工具中都直接生效。如果你的 Markdown 管线会清洗 iframe,就把代码放进布局模板或 raw-HTML include(Hugo 的 _includes/ 里(Hugo 的 _includes/ ),再从页面引用。
常见问题
我的 Content Security Policy 会拦截 iframe 吗?
如果你的站点发送带 frame-src/frame-ancestors 指令的 CSP,把 https://timecardcentral.com 加入 frame-src。大多数站点不发送 CSP;如果框一直是空的,查浏览器控制台是否有 CSP 报错。
我的站是 HTTP,挂件是 HTTPS。
没问题 —— HTTP 页面里嵌 HTTPS 内容是允许的(反过来才会被拦)。但我们仍建议你的页面启用 HTTPS。
可以懒加载或动态调整大小吗?
代码本身已带 loading="lazy"。要动态调整尺寸,从你自己的脚本修改 height 属性即可 —— 在建议高度下挂件内部不会出现滚动条。