uniapp里面使用iframe子页面向父页面通信
时间: 2023-12-23 16:05:12 浏览: 163
在uniapp中使用iframe子页面向父页面通信,需要使用官方提供的renderjs,并且需要注意以下几点:
1. 在父页面中引入renderjs,并在mounted生命周期中初始化renderjs。
2. 在子页面中使用postMessage方法向父页面发送消息,并在父页面中监听message事件来接收消息。
下面是一个示例代码:
在父页面中:
```
<template>
<view>
<iframe src="子页面地址" @load="onLoad"></iframe>
</view>
</template>
<script>
import renderjs from '@/common/renderjs/renderjs.js'
export default {
mounted() {
renderjs.init()
window.addEventListener('message', this.onMessage)
},
methods: {
onMessage(event) {
console.log('收到子页面消息:', event.data)
},
onLoad() {
const iframe = this.$refs.iframe
iframe.contentWindow.postMessage('父页面向子页面发送消息', '*')
}
}
}
</script>
```
在子页面中:
```
<template>
<view>
子页面内容
</view>
</template>
<script>
export default {
mounted() {
window.addEventListener('message', this.onMessage)
},
methods: {
onMessage(event) {
console.log('收到父页面消息:', event.data)
parent.postMessage('子页面向父页面发送消息', '*')
}
}
}
</script>
```
阅读全文