window.postMessage 与 Vue 一起使用注意的问题

在Vue项目中,当一个组件内嵌套了多个同时活动的Iframe时,使用window.postMessage进行通信会导致一对多的问题。本文介绍如何通过传递唯一标识符来确保组件仅响应当前界面的事件。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

场景:
vue一个组件中嵌套了IFrame ,这时,为了vue与iframe交互事件,选择使用window.postMessage的方法进行交互;
交互方式有点类似于websocket,是双方建立起一个通道;
问题:
当我的项目中有两个模块同时调用了这个组件,且在同一时间都属于打开状态,那么这个通道在iframe的角度看就变成了 一对多,也就是一个模块出发的事件。由iframe发出一个信息后,这个组件会执行两次;

需求:
只想让组件在当前显示的界面执行;

解决:
不同的模块给组件传一个标识符,并将标识符带入到iframe,当iframe传回数据室,带回这个标识进行判断,如果该标识=当前模块给的标识 则执行;

### window.top.postMessage 方法详解 #### 语法结构 `window.top.postMessage(message, targetOrigin, [transfer]);` - `message`: 发送的数据,可以是字符串、对象或其他可序列化的数据[^1]。 - `targetOrigin`: 目标窗口的源地址。为了安全起见,应该尽可能具体指定目标窗口的确切协议、主机名和端口号。如果设置为 `"*"`, 则表示不限制目标窗口的源地址,但这存在安全隐患[^2]。 - `[transfer]`: 可选参数,是一个数组,包含要转移给消息接收方的对象列表(如 `MessagePort` 或 `ArrayBuffer`)。 #### 实际应用案例 假设有一个顶层页面 A 和嵌入其中的一个 iframe B,A 需要向自己发送一条消息: ```javascript // 在顶级文档中执行此代码 window.top.postMessage('Hello from top', 'https://example.com'); ``` 这段代码尝试通过 postMessage 向当前浏览器标签页中的最外层框架 (即自身) 发送信息 "Hello from top" 并指定了目标 URL 为 `https://example.com`. 对于 Vue.js 应用来说,在组件内部可以通过如下方式调用: ```javascript mounted() { this.sendMessageToTop(); }, methods: { sendMessageToTop(){ const msg = { type: 'greeting', text: 'Hi there!' }; window.top.postMessage(msg, '*'); // 注意这里的 '*' 不推荐用于生产环境 } } ``` 需要注意的是,当使用 `*` 作为 `targetOrigin` 参数时,虽然方便但是不建议这样做因为这会让任何监听相同事件的目标都能接收到这条消息,增加了潜在的安全风险[^3].
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值