postmessage实现父子跨域通信核心是“发得准、收得稳、验得严”：父页用contentwindow.postmessage发送，targetorigin须为子页完整源；子页监听message事件并严格校验event.origin；双向通信中子向父可设targetorigin为"*"，但父向子必须精确指定源。
用 postMessage 实现父子页面跨域通信，核心是“发得准、收得稳、验得严”。它不绕过同源策略，而是通过浏览器内置的受控通道完成安全通信，关键不在能不能通，而在怎么防冒充、防误传。
父页面向子页面发送控制指令
父页需先获取 iframe 的 contentWindow，再调用 postMessage。目标源（targetOrigin）必须写成子页面**完整协议+域名+端口**，例如 "https://video.example.com:8080"，不能填 "*"——否则会因安全策略被浏览器静默丢弃。
- 确保 iframe 已加载完成再发消息，可用
iframe.onload或监听load事件 - 推荐结构化消息体，比如
{ type: "play", time: 45 }，避免纯字符串解析歧义 - 若子页面尚未加载或地址错误，
contentWindow可能为null，应加空值判断
子页面接收并校验消息
子页在全局监听 message 事件，第一件事就是核对 event.origin 是否在白名单内。这是防钓鱼和恶意 iframe 注入的最关键一步。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 校验示例：
if (event.origin !== "https://player.example.net") return; - 只信任明确指定的源，开发时可临时放宽（如
http://localhost:3000），但上线必须锁定生产域名 - 解析
event.data前先做类型判断，避免undefined或非对象导致脚本报错
子页面向父页面回传状态（双向通信）
子页可通过 window.parent.postMessage() 主动上报播放进度、错误码、暂停状态等。此时 targetOrigin 可设为 "*"，但仅限于子向父场景——因为父页源不可预知，且父页本身已控制 iframe 加载行为，风险可控。
- 典型用途：定时上报
{ type: "timeupdate", currentTime: 123.4 } - 父页监听时同样要校验
event.origin，尤其当多个不同源 iframe 共存时 - 避免高频发送（如每秒多次），可用节流或只在关键节点（播放/暂停/结束）触发
消息格式与错误处理建议
统一消息结构能大幅降低维护成本。推荐固定字段：type（动作类型）、payload（数据体）、id（可选，用于响应匹配）。
- 父页发
{ type: "seek", payload: { time: 60 } }，子页执行跳转后可回传{ type: "seeked", payload: { time: 60 }, id: "req-123" } - 子页加载失败或视频不支持时，主动发
{ type: "error", code: "MEDIA_ERR_SRC_NOT_SUPPORTED" } - 所有
postMessage调用建议包裹try...catch，防止目标窗口不可达时报错中断逻辑
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
