postmessage是唯一安全通用的跨域iframe通信方案；必须监听load后发送、严格校验event.origin与targetorigin、子页早注册监听器，且禁止使用'*'避免xss风险。
HTML 模板本身不提供跨组件通信能力，它只是静态结构容器；真正起作用的是运行时环境（如 Vue、React）或浏览器原生机制（如 postMessage、localStorage）。直接在纯 HTML 中写两个 <div> 并不能自动互通数据 —— 必须引入明确的通信桥梁。
<h3>纯 HTML 模板里怎么让两个独立 div 交换数据</h3>
<p>没有框架时，<code>div 只是 DOM 节点，彼此无引用关系。想让它们“通信”，本质是让它们背后的 JS 逻辑共享状态或触发事件。
- 用
localStorage：一个div所在脚本调用localStorage.setItem("key", "value")，另一个监听storage事件读取 - 用
CustomEvent+dispatchEvent：需确保两个div的 JS 运行在同一个全局上下文（即同一页面），且能访问共同的父级元素（如document或window） - 避免直接操作对方 DOM：比如
document.getElementById("other-div").innerText = ...属于硬耦合，一旦 ID 改变或加载顺序错乱就失效
Vue 中 HTML 模板如何配合 props / events 实现父子通信
Vue 的 template 是声明式入口，但通信逻辑不在模板里，而在组件定义中。模板只负责绑定和触发。
-
v-bind（简写:）把父组件 data 传给子组件 props：:message="parentMsg" -
v-on（简写@）监听子组件 emit 的事件：@update="handleUpdate" - 子组件内部必须显式调用
this.$emit("update", payload)，否则模板里的@update不会响应 - 不要在模板里写逻辑判断通信条件，比如
v-if="someProp === 'ready'"是渲染控制，不是通信机制
iframe 场景下 HTML 模板如何参与跨域通信
当一个 HTML 页面通过 <iframe src="other.html"></iframe> 嵌入另一个页面时，两个页面的模板互不可见，通信只能走浏览器 API。
- 父页模板中获取 iframe 引用：
document.getElementById("myFrame").contentWindow - 发送消息必须用
postMessage，且目标 origin 不能写"*"（除非开发环境且确认无风险） - 子页模板中监听：
window.addEventListener("message", handler)，且必须校验event.origin防止伪造来源 - 接收方解析
event.data前应做类型检查，比如if (typeof event.data === "object" && event.data.type === "SYNC")
容易被忽略的边界情况
通信失败往往不出错，而是静默失效 —— 尤其当页面未完全加载、iframe 未 ready、或同源策略拦截时。
-
iframe.onload事件比直接操作contentWindow更可靠，但若 iframe 内容重定向或报错，onload可能不触发 -
localStorage的storage事件在当前页面写入时不会触发，只在其他同源页面写入时才触发 - Vue 组件用
v-html渲染富文本时，其中的内联onclick不会自动绑定到 Vue 实例方法，属于 XSS 风险点，不应依赖它做组件通信
