开发者
页面沙箱约定
一个页面是一份自包含的 HTML。工作台用 sandbox="allow-scripts" 的 iframe 运行它:没有同源权限、不能联网,内容安全策略会拦截外部请求。页面只能通过 postMessage 和工作台通信。
消息
| 方向 | 消息 | 含义 |
|---|---|---|
| 页面 → 工作台 | saveslot:ready | 页面已加载,请求主题变量 |
| 工作台 → 页面 | saveslot:theme | 当前主题的颜色,以 CSS 变量给出 |
| 页面 → 工作台 | saveslot:query | 请求执行一个已声明的查询 |
| 工作台 → 页面 | saveslot:result | 查询结果 |
| 页面 → 工作台 | saveslot:height | 内容高度,用于调整框架大小 |
发布时没有声明过的查询会被忽略。
示例
<script>
parent.postMessage({ type: 'saveslot:ready' }, '*');
addEventListener('message', (e) => {
const m = e.data || {};
if (m.type === 'saveslot:theme') Object.assign(document.documentElement.style, m.vars);
if (m.type === 'saveslot:result' && m.query === 'sleep_14d') draw(m.rows);
});
parent.postMessage({ type: 'saveslot:query', query: 'sleep_14d' }, '*');
new ResizeObserver(() => parent.postMessage({ type: 'saveslot:height', height: document.body.scrollHeight }, '*'))
.observe(document.body);
</script>