HTML与iframe无法双向绑定，因iframe是独立执行上下文，v-model无法监听其内部事件；必须用postMessage手动同步，同域需校验origin并结构化传递选区，跨域须严格过滤HTML防XSS。
HTML 与 iframe 无法真正“双向绑定”——Vue 的 v-model 或 reactive 机制对跨上下文 DOM 无效，必须用 postMessage 手动桥接状态，且每次变更都要显式同步。
为什么不能直接用 v-model 绑定 iframe 内容
iframe 是独立执行上下文，它的 document 和 window 与父页完全隔离。即使同域，v-model 也无法监听 iframe 内部的输入事件（比如 Quill 的格式切换、Trix 的粘贴、CodeMirror 的光标跳转），更别说跨域场景下连 iframe.contentWindow 都被拒绝访问。
常见错误现象：document.getElementById('myIframe').contentDocument.body.innerHTML = value 在跨域时抛 SecurityError；同域下硬写入也绕过编辑器内部状态机，导致后续 undo/redo 失效或光标错位。
- Vue 的响应式系统只追踪本页 JS 对象，不观察 iframe 子页面 DOM 变更
- 子页 JS 无法直接修改父页
ref或reactive数据，反之亦然 - 试图用
watch监听 iframe.src 变化来触发重载，会丢失编辑状态且不可控
同域 iframe 的最小可行同步方案
同域下可省略 origin 校验，但依然要避免直接 DOM 操作，优先走消息通道保证编辑器状态一致。
立即学习“前端免费学习笔记（深入）”；
父页（Vue 组件）示例逻辑：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
const iframe = ref(null);
const editorHtml = ref('');
// 初始化后发 handshake
onMounted(() => {
const timer = setTimeout(() => {
iframe.value?.contentWindow?.postMessage(
{ type: 'handshake', nonce: Math.random().toString(36).substr(2, 9) },
'*'
);
}, 100);
});
// 监听子页消息
onBeforeUnmount(() => {
window.removeEventListener('message', handleMessage);
});
const handleMessage = (e) => {
if (e.source !== iframe.value?.contentWindow) return;
if (e.data.type === 'content-update') {
editorHtml.value = e.data.html || '';
}
};
window.addEventListener('message', handleMessage);
- 子页需在编辑器变更时主动调用
parent.postMessage({ type: 'content-update', html: ... }) - 不要用
'*'作为targetOrigin，同域下应传window.location.origin - 子页必须等
DOMContentLoaded后再绑定编辑器事件，否则parent可能未就绪
跨域 iframe 必须校验 origin 且带唯一请求 ID
不校验 e.origin 就接收消息，等于把 XSS 入口直接暴露给任意嵌入者。攻击者只需 iframe src 指向你的域名，就能伪造 content-update 注入恶意 HTML。
父页接收端关键校验点：
const ALLOWED_ORIGINS = ['https://editor.example.com', 'https://staging.editor.example.com'];
const handleMessage = (e) => {
if (!ALLOWED_ORIGINS.includes(e.origin)) return;
if (!e.source || !e.data || typeof e.data !== 'object') return;
if (e.data.type !== 'content-update') return;
if (!e.data.html || typeof e.data.html !== 'string') return;
// 简单 sanitize：仅保留白名单标签和属性（别用 innerHTML 直接赋值）
const sanitized = DOMPurify.sanitize(e.data.html, { ALLOWED_TAGS: ['p', 'b', 'i', 'ul', 'li'] });
editorHtml.value = sanitized;
};
-
e.source必须与当前 iframe 实例匹配，防止多 iframe 场景下消息串扰 - HTML 字符串必须过滤，不能直接
innerHTML = e.data.html，否则<img src=x onerror=alert(1)>立刻触发 - 子页发送时建议附带
timestamp和seq，父页可丢弃延迟 >2s 的旧消息，防重放
光标/选区同步是高频失准的重灾区
只传 html 不够，用户粘贴、快捷键移动光标、右键菜单操作都不会触发编辑器的 input 事件，但会改变 selection。若不同步选区，父页拿到新 HTML 后渲染，光标就永远卡在开头。
子页上报选区时必须结构化：
// 正确：记录相对于父节点的偏移
const sel = getSelection();
if (sel.rangeCount > 0) {
const range = sel.getRangeAt(0);
const anchorNode = range.commonAncestorContainer;
const startOffset = range.startOffset;
const endOffset = range.endOffset;
parent.postMessage({
type: 'content-update',
html: editor.innerHTML,
selection: {
start: { nodePath: getNodePath(anchorNode), offset: startOffset },
end: { nodePath: getNodePath(anchorNode), offset: endOffset }
}
}, targetOrigin);
}
-
getNodePath要能唯一标识节点（如['body', 'div', 'p', 0]），不能依赖node.id（可能为空或重复） - 移动端 WebView 中
document.hasFocus()常为 false，需额外调用iframe.contentWindow.focus()再同步 - 父页还原选区时，必须等 DOM 渲染完成（
nextTick或requestAnimationFrame）再调用setSelectionRange
最易被忽略的是：子页编辑器初始化慢于 iframe.onload，Safari 下 iframe.contentWindow.location.origin 在 onload 回调里仍可能是 null，此时发 handshake 会静默失败。务必加延迟轮询或 fallback 到预设域名，不能靠运气。
