当前位置：首页 > news >正文

一个vue项目中通过iframe嵌套另外一个vue项目，如何让这两个项目进行通信

news 2025/8/22 19:31:40

文章目录

- 需求
- 分析
- - 父传子
  - 子传父

需求

一个vue项目中通过iframe嵌套另外一个vue项目，如何让这两个项目之间进行通信

分析

在Vue项目中通过iframe嵌套另外一个Vue项目时，可以通过postMessage方法实现这两个项目之间的通信。postMessage是HTML5新增加的API，它允许在不同的window或iframe之间发送消息。

父传子

A项目中父组件中调用B项目并发送 msg

<template><iframe id="modle_iframe" ref="Iframe" :src="url" frameborder="0" />
</template>
<script>
export default {name: 'Index',data () {return {viewer: null,url: '',projectId: this.$store.state.project.projectId,structId: this.$store.state.struct.structId,token: getToken()}},mounted () {const iframe = document.getElementById('modle_iframe')const port = process.env.NODE_ENV === 'development' ? 9002 : 41003const baseUrl = `${window.location.protocol}//${window.location.hostname}:${port}/#/home`this.url = `${baseUrl}?projectId=${this.projectId}&structId=${this.structId}&token=${this.token}&sign=9`const obj = {sign: 'safeDaba',value: '9'}const msg = JSON.stringify(obj)iframe.contentWindow.postMessage(msg, '*')// this.$nextTick(() => {//     this.init()//   })},methods: {}
}
</script>
<style scoped>
#modle_iframe {width: 100%;height: 600px;
}
</style>

B项目中子组件中接收B项目发送的 msg

window.addEventListener('message', function (e) {e.stopPropagation();//防止异常try {let data = JSON.parse(e.data); //转化为jsonif (data.sign === 'waterAndRain') {if (data.value === '1') {}} else {}} catch (err) {}});

如果上述代码看不太明白，那么

下面是一个示例代码，演示了如何在父窗口和子窗口之间使用postMessage方法进行通信：

在父窗口中：

// 获取iframe元素
const iframe = document.querySelector('#myIframe')// 监听message事件
window.addEventListener('message', (event) => {// 判断消息来源是否为iframe的地址if (event.source === iframe.contentWindow) {// 处理接收到的消息console.log('收到来自子窗口的消息：', event.data)}
})// 发送消息给iframe
iframe.contentWindow.postMessage('Hello from parent', '*')

在子窗口中：

// 监听message事件
window.addEventListener('message', (event) => {// 判断消息来源是否为父窗口的地址if (event.source === window.parent) {// 处理接收到的消息console.log('收到来自父窗口的消息：', event.data)// 发送消息给父窗口window.parent.postMessage('Hello from child', '*')}
})

在上述代码中，我们首先获取了用于嵌套另一个Vue项目的iframe元素。然后，在父窗口中监听了message事件，当接收到来自iframe的消息时，就会将消息打印输出到控制台中。

接着，在父窗口中使用postMessage方法向iframe发送了一条消息。

在子窗口中，我们也监听了message事件，并判断消息来源是否为父窗口的地址。当接收到来自父窗口的消息时，就会将消息打印输出到控制台中，并使用postMessage方法向父窗口发送了一条消息。

需要注意的是，当使用postMessage方法发送消息时，第二个参数指定的是消息的目标窗口的origin，这里我们使用通配符*表示允许发送消息到任何域名，但在实际应用中建议设置具体的域名。

子传父

首先，在被调用者子组件中，使用postMessage方法将消息传递给父窗口：

子页面

// 在被调用者子组件中
// 向父窗口发送消息
window.parent.postMessage('Hello from child', '*')

然后，在调用者父组件中，通过监听message事件接收子组件传递的消息：

mounted() {window.addEventListener('message', this.handleMessage)},methods: {handleMessage(event) {// 处理接收到的消息console.log('收到来自子组件的消息：', event.data)},}

或

// 在调用者父组件中
// 监听message事件
window.addEventListener('message', (event) => {// 判断消息来源是否为被调用者子组件的地址if (event.source === document.querySelector('iframe').contentWindow) {// 处理接收到的消息console.log('收到来自子组件的消息：', event.data)}
})