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

ai做网站优化营商环境建议

news 2025/7/3 21:41:56

ai做网站,优化营商环境建议,门户网站做商城的,中国机械加工网易下拉方法文章目录需求分析父传子子传父需求一个vue项目中通过iframe嵌套另外一个vue项目，如何让这两个项目之间进行通信分析在Vue项目中通过iframe嵌套另外一个Vue项目时，可以通过postMessage方法实现这两个项目之间的通信。postMessage是HTML5新增加的API…

文章目录

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

需求

一个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)}
})