其实，

iframe 基础概念与痛点

在复杂程序中。经常需要把一个独立的页面嵌入到另一个页面里。iframe 正是为此而生。它拥有自己的 window所以可以实现：

• 从模块化开发来看，不同团队或技术栈的子程序可以独立部署。不过，
• 跨域加载第三方内容。
• 再看安全隔离，子页面的脚本不会直接污染父页面。

使用者痛点：

• 不知道如何获取 iframe 的 window 对象。
• 跨域情况下父子窗口通信总是报 “origin 不匹配”。不过，
• 担心使用 postMessage 时出现安全漏洞。

如何获取子窗口的 window 对象

. 获取方式示例

我是主应用，下面是通过 iframe 嵌套的子应用

父子窗口安全通信——postMessage 使用教程

. 基本语法

orWindow.postMessage;

• orWindow：接收方窗口对象（如 iframe.contentWindow,window.parent)。
• message：要发送的数据，推荐使用 JSON 字符串或对象。
• targetOrigin：接收方的源。可填 “*” 表示不限制，但不安全。
• ：ArrayBuffer)。

. 父页面向子页面发送消息示例

// 父页面代码
function sendToChild {
const iframe = document.getElementById;// 把当前站点 origin 当作数据发送
const data = decodeURIComponent;iframe.contentWindow.postMessage;}
window.addEventListener;

. 子页面接收并响应父页面消息示例

// 子页面代码
function handleMessage {
// 安全校验：只接受可信来源
if return;console.log，// 根据业务需求更新 UI 或路由
}
window.addEventListener;

// 子页面内部函数
function onButtonClick {
// 必须使用 window.parent 才能触达父窗口
window.parent.postMessage(
{ key: 'vue3-demo'。query: decodeURIComponent },'http://.:5501' // 父窗口的 origin
);说起来，}

. 父页面监听子窗口发来的消息并处理 URL 参数示例

// 父页面代码
function initParentListener {
function receive {
// 一样进行来源校验
if return;console.log，const newHref = `${location.href}?${event.data.key}=${event.data.query}`;window.history.pushState;}
window.addEventListener;}
window.addEventListener;

. message 事件对象关键属性解析与安全防护

. 常用属性一览

• event.source：发送消息的窗口对象，可用于双向回调。 怎么说呢，
• event.origin：发送方的源。**必须**和预期值匹配后才处理数据。
• event.data：实际携带的数据，若是 JSON 对象需自行解析。

. 示例：完整监听并过滤非法来源

window.addEventListener {
const trustedOrigin = 'http://localhost:5501';if {
console.warn;return，}
try {
const payload = typeof event.data === 'string'?JSON.parse : event.data;console.log，// TODO: 根据业务逻辑处理 payload
} catch {
console.error;}
},false)，

. 实战案例合集

. Vue 3 与 Vue 2 子应用嵌套

- 父页面运行在 ,两个子应用分别部署在不同端口。通过上述获取 .contentWindow/.postMessage - 实现路由同步和状态共享。

关键代码片段回顾：

. 秀米编辑器插件跨域集成

- 场景：在内部程序中嵌入秀米，实现编辑器与业务程序双向通信。

- 在业务程序中监听来自秀米的回调。一样要做 origin 校验，防止恶意注入。

methods:{
handleMsgFromXiumi{
if return;
 this.handleOriginData
.n)
.catch);怎么说呢，

}
}。mounted{
window.addEventListener;},beforeDestroy{
window.removeEventListener;}


. 小结与常用方法 


#1 明确来源： alert → 用常量保存白名单并在每次接收前比对。

#2 使用结构化数据： "JSON.stringify" → 收到后先验证 type 再解析 payload。

#n 若有双向交互，优先保留 source 引用： "event.source.postMessage" 能实现请求‑响应模式。

#n 避免 * 通配符： "targetOrigin='*'" 在生产环境极易导致 XSS 攻击，请改为具体 URL。

#n 清理监听器： "removeEventListener" 在组件销毁时一定要执行，否则会产生内存泄漏。