vue配置postmessge
时间: 2023-07-04 22:22:37 浏览: 64
要在 Vue 中配置 postMessage,你需要使用 Vue 的 $refs 属性来获取对应的 DOM 元素,然后使用 postMessage API 发送消息。
以下是一个示例代码:
```html
<template>
<div>
<iframe ref="myIframe" src="https://example.com"></iframe>
</div>
</template>
<script>
export default {
mounted() {
// 获取 iframe 的 DOM 元素
const iframe = this.$refs.myIframe;
// 监听消息事件
window.addEventListener("message", (event) => {
// 判断来源是否是 iframe
if (event.source !== iframe.contentWindow) {
return;
}
// 处理接收到的消息
console.log("Received message:", event.data);
});
// 发送消息
iframe.contentWindow.postMessage({ type: "hello" }, "*");
},
};
</script>
```
在这个示例中,我们获取了名为 "myIframe" 的 iframe 元素,并在 mounted 钩子函数中监听了消息事件。当接收到消息时,我们判断来源是否是这个 iframe,然后处理接收到的数据。最后,我们还向 iframe 发送了一条消息。
请注意,我们在发送消息时使用了 "*" 作为目标 origin,这意味着我们允许向任何域名发送消息。在实际应用中,请根据需要设置正确的 origin。