怎么利用 postMessage 机制实现跨域 iframe HTML 编辑器的数据实时同步-html教程-PHP中文网

必须用 postmessage 双向通信并显式确认状态，禁止直接读写 iframe dom；需等待 iframe 加载完成且 origin 可读后再通信，首次消息应为带 nonce 的 handshake；编辑器变更须主动上报 content-update，含 sanitized html 和精确 selection；父页接收时须严格校验 origin、source、结构及 html 安全性；光标同步需时间戳+ack 机制，移动端注意 focus 权限。

怎么利用 postmessage 机制实现跨域 iframe html 编辑器的数据实时同步

不能靠 iframe.contentWindow.document 直接读写编辑器 DOM，必须用 postMessage 双向通信 + 显式状态确认，否则同步必然丢帧、错位或被劫持。

必须等 iframe 加载完成且 origin 可读再发第一条消息

很多编辑器初始化慢（比如加载 CodeMirror 主题、Monaco worker），iframe.onload 触发时 iframe.contentWindow.location.origin 可能还是 null（尤其 Safari）。直接发 postMessage 会静默失败，控制台无报错。

监听 iframe 的 load 事件，但不要立刻发消息
在回调里加一层轮询或 setTimeout 延迟 100ms，再检查 iframe.contentWindow?.location?.origin 是否为有效字符串
若仍为空，可 fallback 到预设白名单域名（如 'https://editor.example.com'），但不能用 '*'
首次发送建议带 type: 'handshake' 和随机 nonce，子页回传确认后再开始同步正文

编辑器内容变更必须主动上报，不能依赖定时轮询

HTML 编辑器（如 Quill、Trix、自研富文本）的 DOM 变更不会自动触发 postMessage。父页无法感知光标移动、格式切换或粘贴行为，单向监听输入事件也不可靠（比如快捷键、右键菜单、拖拽插入）。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

子页面需在编辑器实例上绑定变更钩子（如 Quill 的 text-change、Trix 的 trix-change）
每次变更后立即调用 parent.postMessage({ type: 'content-update', html: editor.innerHTML, selection: getSelectionRange() }, event.origin)
selection 必须包含 anchorNode 和 focusNode 的相对位置（如 offset in parent node），不能只传 getSelection().toString()
避免高频抖动：对连续输入做 requestIdleCallback 节流，但光标跳转、粘贴等操作必须立即上报

父页面接收时必须校验 origin + source + message 结构

攻击者只要嵌入同名 iframe 就能伪造 content-update 消息，把恶意 HTML 注入父页 DOM，造成 XSS。

收到消息后第一件事：检查 event.origin 是否在可信域名白名单中（用 Array.includes()，不用 indexOf）
第二件事：确认 event.source === iframe.contentWindow，防止其他窗口冒充
第三件事：验证 event.data.type === 'content-update' 且 event.data.html 是字符串、event.data.selection 是合法对象
对 event.data.html 必须用 DOMPurify.sanitize() 过滤后再插入，不能直接 innerHTML = ...

光标/选区同步需要双向 handshake + 时间戳对齐

父页设置光标位置后，子页可能因渲染延迟、异步 focus 失败而不同步；子页上报选区后，父页若直接 setSelectionRange 可能因 iframe 未聚焦而无效。

父页发 { type: 'set-selection', range: { start: 123, end: 128 } } 时，必须附带 timestamp: Date.now()
子页收到后执行 editor.focus(); setSelection(...)，再回传 { type: 'selection-ack', timestamp: receivedTimestamp, success: true/false }
父页若 500ms 内没收到 ack，应重试一次；两次失败则标记“同步中断”，暂停自动同步，交由用户手动恢复
移动端需额外判断：iOS 上 focus() 必须由用户手势触发，子页应在 touchstart 后缓存一次 focus() 权限，供后续 postMessage 调用